<template>
    <div class="d-flex align-items-center flex-wrap">
        <div class="d-flex align-items-center">
            <div class="avatar me-2">
                <img
                    :src="getProfileImage(profileImg)"
                    alt="user"
                    class="rounded-circle"
                    @error="setDefaultImage($event)"
                    @load="showImage($event)"
                />
            </div>

            <div class="me-2">
                <h6 class="mb-0">{{ profileName ? profileName : nickname }}</h6>
                <div class="profile-detail">
                    <span>{{ date }}</span>
                    <template v-if="showDetail">
                        <span class="ms-2"> <i class="fa-regular fa-eye"></i> {{ views }} </span>
                        <span class="ms-1"> <i class="bx bx-comment"></i> {{ commentNum }} </span>
                    </template>
                </div>
            </div>
        </div>
        <!-- 버튼 영역 -->
        <div class="ms-auto text-end">
            <!-- 수정, 삭제 버튼 -->
            <template v-if="!isDeletedComment && (unknown || isCommentAuthor || isAuthor)">
                <div class="float-end ms-1">
                    <EditButton @click.stop="editClick" />
                    <DeleteButton :class="'ms-1'" @click.stop="deleteClick" />
                </div>
            </template>

            <!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
            <BoardRecommendBtn v-if="isLike" :boardId="boardId" :comment="comment" @updateReaction="handleUpdateReaction" />
        </div>
    </div>
</template>

<script setup>
    import { computed, defineProps, defineEmits, inject } from 'vue';
    import DeleteButton from '../button/DeleteBtn.vue';
    import EditButton from '../button/EditBtn.vue';
    import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';

    // Props 정의
    const props = defineProps({
        comment: {
            type: Object,
            required: false,
        },
        boardId: {
            type: Number,
            required: false,
        },
        commentId: {
            type: Number,
            required: false,
        },
        profileName: {
            type: String,
            default: '',
        },
        nickname: {
            type: String,
            default: '',
        },
        unknown: {
            type: Boolean,
            default: true,
        },
        showDetail: {
            type: Boolean,
            default: true,
        },
        isAuthor: {
            type: Boolean,
            default: false,
        },
        isCommentAuthor: Boolean,
        isCommentProfile: Boolean,
        date: {
            type: String,
            required: '',
        },
        views: {
            type: Number,
            default: 0,
        },
        commentNum: {
            type: Number,
            default: 0,
        },
        isLike: {
            type: Boolean,
            default: false,
        },
        profileImg: {
            type: String,
            default: false,
        },
    });

    const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
    const $common = inject('common');

    const isDeletedComment = computed(() => {
        return props.comment?.content === '삭제된 댓글입니다' && props.comment?.updateAtRaw !== props.comment?.createdAtRaw;
    });

    // 수정
    const editClick = () => {
        emit('editClick', { ...props.comment, unknown: props.unknown });
    };

    // 삭제
    const deleteClick = () => {
        emit('deleteClick', { ...props.comment, unknown: props.unknown });
    };

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

    // 프로필 이미지 경로 설정
    const getProfileImage = profileImg => {
        return $common.getProfileImage(profileImg, props.unknown);
    };

    const setDefaultImage = e => {
        return $common.setDefaultImage(e);
    };

    const showImage = e => {
        return $common.showImage(e);
    };
</script>
