<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"
                        placeholder="댓글 달기"
                        rows="3"
                        v-model="comment"
                    ></textarea>
                </div>
            </div>

            <!-- 옵션 및 버튼 섹션 -->
            <div class="d-flex justify-content-between flex-wrap mt-4">
                <div class="d-flex flex-wrap align-items-center">
                    <!-- 익명 체크박스 (익명게시판일 경우에만)-->
                    <div v-if="unknown" class="form-check form-check-inline mb-0 me-4">
                        <input
                            class="form-check-input"
                            type="checkbox"
                            id="inlineCheckbox1"
                            v-model="isCheck"
                        />
                        <label class="form-check-label" for="inlineCheckbox1">익명</label>
                    </div>

                    <!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) -->
                    <div v-if="isCheck" class="d-flex align-items-center flex-grow-1">
                        <label class="form-label mb-0 me-3" for="basic-default-password">비밀번호</label>
                        <input
                            type="password"
                            id="basic-default-password"
                            class="form-control flex-grow-1"
                            v-model="password"
                        />
                        <!-- <span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span> -->
                    </div>
                </div>

                <!-- 답변 쓰기 버튼 -->
                <div class="ms-auto mt-3 mt-md-0">
                    <button class="btn btn-primary" @click="handleCommentSubmit">
                        <!-- <i class="icon-base bx bx-check"></i> -->
                        확인
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, defineEmits, defineProps, computed, watch } from 'vue';

const props = defineProps({
    unknown: {
        type: Boolean,
        default: true,
    },
    parentId: {
        type: Number,
        default: 0
    }
});

const comment = ref('');
const password = ref('');
const isCheck = ref(props.unknown);

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

watch(() => props.unknown, (newVal) => {
    isCheck.value = newVal;
});

function handleCommentSubmit() {
    emit('submitComment', {
        comment: comment.value,
        password: isCheck.value ? password.value : '',
    });

    comment.value = '';
    password.value = '';
}


</script>
