<template>
    <div>
        <BoardProfile :profileName="comment.author" :showDetail="false" :author="true" :isChild="isChild" />
        <div class="mt-6">
            <p class="m-0">{{ comment.content }}</p>
        </div>
        <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
        <BoardComentArea v-if="isComment" @submit="submitComment"/>

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

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

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

// emits 정의
const emit = defineEmits(['submitComment']);

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

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


</script>

<style scoped>
    /* .twoDepth {
        margin-top: 10px;
        padding-left: 40px;
    }

    .list-unstyled > li ~ li {
        margin-top: 10px;
    }

    .btn-text-primary {
        padding-left: 0;
    }
    .btn-text-primary:hover,
    .btn-text-primary:active,
    .btn-text-primary:focus {
        background-color: transparent
    } */
</style>
