<template>
    <div>
        <BoardProfile
            :unknown="unknown"
            :boardId="comment.boardId"
            :profileName="comment.author"
            :date="comment.createdAt"
            :comment="comment"
            :showDetail="false"
            :author="true"
            :isLike="!isLike"
            :isPassword="isPassword"
            @editClick="editClick"
            @deleteClick="deleteClick"
            @submitPassword="submitPassword"
            @updateReaction="handleUpdateReaction"
            @toggleEdit="emit('toggleEdit', comment.commentId, true)"
        />


        <div class="mt-6">
            <template v-if="isEditTextarea">
                <textarea v-model="editedContent" class="form-control"></textarea>
                <div class="mt-2 d-flex justify-content-end">
                    <button class="btn btn-secondary me-2" @click="emit('toggleEdit', comment.commentId, false)">취소</button>
                    <button class="btn btn-primary" @click="submitEdit">수정 완료</button>
                </div>
            </template>
            <template v-else>
                <p class="m-0">{{ comment.content }}</p>
            </template>
        </div>

        <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
        <BoardCommentArea v-if="isComment" @submitComment="submitComment"/>

        <!-- 대댓글 -->
        <ul v-if="comment.children && comment.children.length" class="list-unstyled">
            <li
            v-for="child in comment.children"
            :key="child.commentId"
                class="mt-8 pt-6 ps-10 border-top"
            >
                <BoardComment
                    :comment="child"
                    :unknown="unknown"
                    :isPlusButton="false"
                    :isLike="true"
                    @submitComment="submitComment"
                    @updateReaction="handleUpdateReaction"
                />
            </li>
        </ul>
        <!-- <ul class="list-unstyled twoDepth">
            <li>
                <BoardProfile profileName=곤데리2 :showDetail="false" />
                <div class="mt-2">저도 궁금합니다.</div>
                <BoardCommentArea v-if="comment" />
            </li>
        </ul> -->
        <!-- <BoardProfile profileName=곤데리 :showDetail="false" />
        <div class="mt-2">저도 궁금합니다.</div>
        <PlusButton  @click="toggleComment"/>
        <BoardCommentArea v-if="comment" /> -->
    </div>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue';
import BoardProfile from './BoardProfile.vue';
import BoardCommentArea from './BoardCommentArea.vue';
import PlusButton from '../button/PlusBtn.vue';

const props = defineProps({
  comment: {
    type: Object,
    required: true,
  },
  unknown: {
        type: Boolean,
        default: true,
    },
  isPlusButton: {
    type: Boolean,
    default: true,
  },
  isLike: {
    type: Boolean,
    default: false,
  },
  isEditTextarea: {
    type: Boolean,
    default: false
  },
  isPassword: {
    type: Boolean,
    default: false,
},
});

// emits 정의
const emit = defineEmits(['submitComment', 'updateReaction', 'toggleEdit', 'editClick']);

// 댓글 입력 창 토글
const isComment = ref(false);
const toggleComment = () => {
    isComment.value = !isComment.value;
};

// 부모 컴포넌트에 대댓글 추가 요청
const submitComment = (newComment) => {
    emit('submitComment', { parentId: props.comment.commentId, ...newComment });

    isComment.value = false;
};

// 좋아요, 싫어요
const handleUpdateReaction = (reactionData) => {
    emit('updateReaction', {
        boardId: props.comment.boardId,
        commentId: props.comment.commentId,
        ...reactionData
    });
};

// 수정
const editClick = (data) => {
    emit('editClick', data);
};

// 수정
const editedContent = ref(props.comment.content);
const submitEdit = () => {
  emit('submitComment', { commentId: props.comment.commentId, content: editedContent.value });
  emit('toggleEdit', props.comment.commentId, false); // 수정 모드 종료
};

</script>
