<template v-if="isRecommend">
    <button class="btn btn-label-primary btn-icon" :class="{ clicked: likeClicked, big: bigBtn }" @click="handleLike">
        <i class="fa-regular fa-thumbs-up"></i> <span class="num">{{ likeCount }}</span>
    </button>
    <button class="btn btn-label-danger btn-icon" :class="{ clicked: dislikeClicked, big: bigBtn }" @click="handleDislike">
        <i class="fa-regular fa-thumbs-down"></i> <span class="num">{{ dislikeCount }}</span>
    </button>
</template>

<script setup>
    import { ref, computed } from 'vue';

    const props = defineProps({
        comment: {
            type: Object,
            default: () => ({}),
        },
        likeClicked: {
            type: Boolean,
            default: false,
        },
        dislikeClicked: {
            type: Boolean,
            default: false,
        },
        bigBtn: {
            type: Boolean,
            default: false,
        },
        isRecommend: {
            type: Boolean,
            default: true,
        },
        boardId: {
            type: Number,
            required: true,
        },
        commentId: {
            type: [Number, null],
            default: null,
        },
        likeCount: {
            type: Number,
            default: 0,
        },
        dislikeCount: {
            type: Number,
            default: 0,
        },
    });

    const emit = defineEmits(['updateReaction']);

    const likeClicked = ref(props.likeClicked);
    const dislikeClicked = ref(props.dislikeClicked);
    const likeCount = computed(() => props.comment?.likeCount ?? props.likeCount);
    const dislikeCount = computed(() => props.comment?.dislikeCount ?? props.dislikeCount);

    const handleLike = () => {
        const isLike = !likeClicked.value;
        const isDislike = false;

        emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
        likeClicked.value = isLike;
        dislikeClicked.value = false;
    };

    const handleDislike = () => {
        const isDislike = !dislikeClicked.value;
        const isLike = false;

        emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
        dislikeClicked.value = isDislike;
        likeClicked.value = false;
    };
</script>

<style scoped>
    .btn + .btn {
        margin-left: 5px;
    }

    .num {
        margin-left: 5px;
    }

    .btn-label-danger.clicked {
        background-color: #e6381a;
    }

    .btn-label-danger.clicked i,
    .btn-label-danger.clicked span {
        color: #fff;
    }

    .btn-label-primary.clicked {
        background-color: #5f61e6;
    }

    .btn-label-primary.clicked i,
    .btn-label-primary.clicked span {
        color: #fff;
    }

    .btn {
        width: 55px;
        /* height: 30px; */
    }

    .btn.big {
        width: 70px;
        height: 70px;
        font-size: 18px;
    }

    @media screen and (max-width: 450px) {
        .btn {
            width: 50px;
            height: 20px;
            font-size: 12px;
        }
    }
</style>
