<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="avatar-wrapper">
                    <div v-if="!unknown" class="avatar me-4">
                        <img src="/img/avatars/11.png" alt="Avatar" class="rounded-circle">
                    </div>
                </div> -->
                <!-- 텍스트박스 -->
                <div class="w-100">
                    <textarea
                        class="form-control mb-2"
                        placeholder="댓글 달기"
                        rows="3"
                        :maxlength="maxLength"
                        v-model="comment"
                        @input="alertTextHandler"
                    ></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 text-start ms-2">{{ textAlert }}</span>
                </div>
            </div>

            <!-- 옵션 및 버튼 섹션 -->
            <div class="d-flex justify-content-between mt-1">
                <div class="row g-2">
                    <div class="d-flex flex-wrap align-items-center mb-2">
                        <!-- 익명 체크박스 (익명게시판일 경우에만)-->
                        <div v-if="unknown" class="form-check form-check-inline mb-0 me-4 d-flex align-items-center">
                            <input
                                class="form-check-input me-2"
                                type="checkbox"
                                :id="`checkboxAnnonymous${commnetId}`"
                                v-model="isCheck"
                                @change="pwd2AlertHandler"
                            />
                            <label class="form-check-label" :for="`checkboxAnnonymous${commnetId}`">익명</label>
                        </div>

                        <!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) -->
                        <template v-if="isCheck">
                            <div class="d-flex align-items-center col">
                                <input
                                    type="password"
                                    id="basic-default-password"
                                    class="form-control w-80"
                                    autocomplete="new-password"
                                    v-model="password"
                                    placeholder="비밀번호 입력"
                                    @input="passwordAlertTextHandler"
                                />
                            </div>
                        </template>
                    </div>
                    <div class="row">
                        <div style="width: 70px"></div>
                        <div class="col">
                            <span v-if="passwordAlert" class="invalid-feedback d-inline">{{ passwordAlert }}</span>
                            <span v-else class="invalid-feedback d-inline">{{ passwordAlert2 }}</span>
                        </div>
                    </div>
                </div>

                <!-- 답변 쓰기 버튼 -->
                <div class="ms-auto mt-3 mt-md-0">
                    <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 passwordAlert2 = ref('');

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

    const alertTextHandler = () => {
        textAlert.value = '';
    };

    const passwordAlertTextHandler = event => {
        event.target.value = event.target.value.replace(/\s/g, '');
        passwordAlert2.value = '';
    };

    const handleCommentSubmit = () => {
        if (!$common.isNotEmpty(comment.value)) {
            textAlert.value = '댓글을 입력하세요';
            return false;
        } else {
            textAlert.value = '';
        }

        if (isCheck.value && !$common.isNotEmpty(password.value)) {
            passwordAlert2.value = '비밀번호를 입력하세요';
            return false;
        } else {
            passwordAlert2.value = '';
        }

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

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

    // 비밀번호 경고 초기화
    const pwd2AlertHandler = () => {
        if (isCheck.value === false) passwordAlert2.value = '';
    };

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

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