<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"
                :isCommentPassword="comment.isCommentPassword" 
                :isEditTextarea="comment.isEditTextarea"
                :passwordCommentAlert="passwordCommentAlert"
                @editClick="$emit('editClick', comment)"
                @deleteClick="$emit('deleteClick', comment)"
                @submitPassword="submitPassword"
                @submitComment="submitComment"
                @commentDeleted="handleCommentDeleted"
                @submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
                @cancelEdit="$emit('cancelEdit', comment)"
                @updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
            />
        </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,
    },
    isCommentPassword: {
        type: Boolean,
        default: false,
    },
    isEditTextarea: {
        type: Boolean,
        default: false,
    },
    passwordCommentAlert: {
        type: String,
        default: false
    }
});

const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'submitPassword', 'clearPassword']);

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);
};
</script>
