<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, watch } from 'vue';

const props = defineProps({
    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,
        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 = ref(props.likeCount);
const dislikeCount = ref(props.dislikeCount);

// 부모에서 likeCount 또는 dislikeCount가 변경되면 로컬 상태를 업데이트
watch(() => props.likeCount, (newVal) => {
    likeCount.value = newVal;
});

watch(() => props.dislikeCount, (newVal) => {
    dislikeCount.value = newVal;
});

const handleLike = () => {
    likeClicked.value = !likeClicked.value;
    likeCount.value += likeClicked.value ? 1 : -1;
    emit('updateReaction', { type: 'like', boardId: props.boardId, commentId: props.commentId });
    if(likeClicked.value === true){
        if(dislikeClicked.value ===  true) {
            dislikeClicked.value = false;
            dislikeCount.value += -1
        }
    }
};

const handleDislike = () => {
    dislikeClicked.value = !dislikeClicked.value;
    dislikeCount.value += dislikeClicked.value ? 1 : -1;
    emit('updateReaction', { type: 'dislike', boardId: props.boardId, commentId: props.commentId });
    if(dislikeClicked.value === true){
        if(likeClicked.value ===  true) {
            likeClicked.value = false;
            likeCount.value += -1
        }
    }
};

</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>
