<template>
    <ul class="list-unstyled mt-10">
        <li
            v-for="comment in comments"
            :key="comment.commentId"
            class="mt-6 border-bottom pb-6"
        >
            <BoardComment
                :unknown="unknown"
                :comment="comment"
                :isCommentAuthor="comment.isCommentAuthor"
                :isEditTextarea="comment.isEditTextarea"
                :isDeleted="comment.isDeleted"
                :isCommentPassword="isCommentPassword" 
                :passwordCommentAlert="passwordCommentAlert || ''"
                :currentPasswordCommentId="currentPasswordCommentId"
                :password="password"
                @editClick="handleEditClick"
                @deleteClick="handleDeleteClick"
                @submitPassword="submitPassword"
                @submitComment="submitComment"
                @submitEdit="handleSubmitEdit"
                @cancelEdit="handleCancelEdit"
                @updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
                @update:password="updatePassword"
            />
        </li>
    </ul>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import BoardComment from './BoardComment.vue'

const props = defineProps({
    comments: {
        type: Array,
        required: true,
        default: () => []
    },
    unknown: {
        type: Boolean,
        default: true,
    },
    isCommentAuthor: {
        type: Boolean,
        default: false,
    },
    isCommentPassword: {
        type: Boolean,
        default: false,
    },
    isEditTextarea: {
        type: Boolean,
        default: false,
    },
    isDeleted: {
        type: Boolean,
        default: false,
    },
    passwordCommentAlert: {
        type: String,
        default: ''
    },
    currentPasswordCommentId: {
        type: Number
    },
    password:{
        type: String
    },
});

const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'clearPassword','submitEdit', 'update:password']);

const submitComment = (replyData) => {
    emit('submitComment', replyData);
};

const handleUpdateReaction = (reactionData, commentId, boardId) => {
    const updatedReactionData = {
        ...reactionData,  
        commentId: commentId || reactionData.commentId, 
        boardId: boardId || reactionData.boardId,
    };

    emit('updateReaction', updatedReactionData);
}

const submitPassword = (comment, password) => {
    emit('submitPassword', comment, password);
};

const handleEditClick = (comment) => {
    if (comment.parentId) {
        emit('editClick', comment); // 대댓글
    } else {
        emit('editClick', comment); // 댓글
    }
};

const handleSubmitEdit = (comment, editedContent) => {
    emit("submitEdit", comment, editedContent);
};

const handleDeleteClick = (comment) => {
    if (comment.parentId) {
        emit('deleteClick', comment); // 대댓글 삭제
    } else {
        emit('deleteClick', comment); // 댓글 삭제
    }
};

const handleCancelEdit = (comment) => {
    if (comment.parentId) {
        emit('cancelEdit', comment); // 대댓글 수정 취소
    } else {
        emit('cancelEdit', comment); // 댓글 수정 취소
    }
};

const updatePassword = (newPassword) => {
    emit('update:password', newPassword);
};
</script>
