<template>
    <div class="card shadow-none border mt-6">
        <div class="card-body">
            <!-- 댓글 입력 섹션 -->
            <div class="d-flex justify-content-start align-items-top">
                <div class="w-100">
                    <textarea
                        class="form-control mb-1"
                        placeholder="댓글 달기"
                        rows="3"
                        :maxlength="maxLength"
                        v-model="comment"
                        @input="clearAlert('comment')"
                    ></textarea>
                    <span v-if="commentAlert" class="invalid-feedback d-inline text-start ms-2 mb-2">{{ commentAlert }}</span>
                    <span v-else class="invalid-feedback d-inline">{{ textAlert }}</span>
                </div>
            </div>

            <!-- 옵션 및 버튼 섹션 -->
            <div class="d-flex justify-content-between align-items-center mt-1 pb-4">
                <!-- 왼쪽: 익명 체크박스 -->
                <div v-if="unknown" class="form-check form-check-inline mb-0 me-2">
                    <input
                        class="form-check-input"
                        type="checkbox"
                        :id="`checkboxAnnonymous${commnetId}`"
                        v-model="isCheck"
                        @change="pwd2AlertHandler"
                    />
                    <label class="form-check-label text-nowrap" :for="`checkboxAnnonymous${commnetId}`">익명</label>
                </div>

                <!-- 중앙: 닉네임 & 비밀번호 입력 필드 (가로 정렬) -->
                <div v-if="isCheck" class="d-flex flex-grow-1 gap-2">
                    <!-- 닉네임 입력 영역 -->
                    <div class="position-relative">
                        <input
                            type="text"
                            class="form-control mb-1"
                            v-model="nickname"
                            placeholder="닉네임"
                            @input="clearAlert('nickname')"
                        />
                        <!-- 닉네임 경고 메시지 -->
                        <div v-if="nicknameAlert" class="position-absolute text-danger small top-100 start-0" >
                            {{ nicknameAlert }}
                        </div>
                    </div>

                    <!-- 비밀번호 입력 영역 -->
                    <div class="position-relative">
                        <input
                            type="password"
                            id="basic-default-password"
                            class="form-control mb-1"
                            autocomplete="new-password"
                            v-model="password"
                            placeholder="비밀번호"
                            @input="clearAlert('password')"
                        />
                        <!-- 비밀번호 경고 메시지 -->
                        <div v-if="passwordAlert2" class="position-absolute text-danger small top-100 start-0">
                            {{ passwordAlert2 }}
                        </div>
                    </div>
                </div>

                <!-- 오른쪽: 답변 쓰기 버튼 -->
                <div class="ms-auto">
                    <SaveBtn class="btn btn-primary" @click="handleCommentSubmit"></SaveBtn>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref, defineEmits, defineProps, watch, inject } from 'vue';
    import SaveBtn from '../button/SaveBtn.vue';

    const props = defineProps({
        unknown: {
            type: Boolean,
            default: true,
        },
        parentId: {
            type: Number,
            default: 0,
        },
        passwordAlert: {
            type: String,
            default: '',
        },
        commentAlert: {
            type: String,
            default: '',
        },
        maxLength: {
            type: Number,
            default: 500,
        },
        commnetId: {
            type: Number,
        },
    });

    const $common = inject('common');
    const comment = ref('');
    const password = ref('');
    const isCheck = ref(false);
    const textAlert = ref('');
    const nicknameAlert = ref('');
    const passwordAlert2 = ref('');
    const nickname = ref('');

    const emit = defineEmits(['submitComment']);

    // 입력 필드별 경고 메시지 초기화
    const clearAlert = field => {
        if (field === 'comment') textAlert.value = '';
        if (field === 'nickname') nicknameAlert.value = '';
        if (field === 'password') passwordAlert2.value = '';
    };

    const handleCommentSubmit = () => {
        let isValid = true;

        // 댓글 공백 체크
        if (!$common.isNotEmpty(comment.value)) {
            textAlert.value = '댓글을 입력해주세요.';
            isValid = false;
        } else {
            textAlert.value = '';
        }

        // 익명 선택 시 닉네임 & 비밀번호 체크
        if (isCheck.value) {
            if (!$common.isNotEmpty(nickname.value)) {
                nicknameAlert.value = '닉네임을 입력해주세요.';
                isValid = false;
            } else {
                nicknameAlert.value = '';
            }

            if (!$common.isNotEmpty(password.value)) {
                passwordAlert2.value = '비밀번호를 입력해주세요.';
                isValid = false;
            } else {
                passwordAlert2.value = '';
            }
        }

        // 모든 입력값이 유효할 경우만 제출
        if (!isValid) return;

        // 댓글 제출
        emit('submitComment', {
            comment: comment.value,
            nickname: isCheck.value ? nickname.value : '',
            password: isCheck.value ? password.value : '',
            isCheck: isCheck.value,
            LOCBRDTYP: isCheck.value ? '300102' : null, // 익명일 경우 '300102' 설정
        });

        // 제출 후 입력 필드 리셋
        resetCommentForm();
    };

    // 비밀번호 & 닉네임 경고 초기화
    const pwd2AlertHandler = () => {
        if (!isCheck.value) {
            passwordAlert2.value = '';
            nicknameAlert.value = '';
        }
    };

    // 입력 필드 리셋 함수 추가
    const resetCommentForm = () => {
        comment.value = '';
        password.value = '';
        nickname.value = '';
        isCheck.value = false;
    };

    watch(
        () => props.passwordAlert,
        () => {
            if (!props.passwordAlert) {
                resetCommentForm();
            }
        },
    );
</script>
