<template>
    <div class="row gx-2 mb-4">
        <div class="col-4">
            <div class="ratio ratio-1x1">
            <!-- 오전 반차 버튼 -->
            <button class="vac-btn vac-btn-warning rounded-circle d-flex align-items-center justify-content-center" :class="{ active: halfDayType === 'AM' }"
                @click="toggleHalfDay('AM')">
                <i class="bi bi-sun"></i>
            </button>
            </div>
        </div>
        <div class="col-4">
            <div class="ratio ratio-1x1">
            <!-- 오후 반차 버튼 -->
            <button class="vac-btn vac-btn-info rounded-circle d-flex align-items-center justify-content-center" :class="{ active: halfDayType === 'PM' }"
                @click="toggleHalfDay('PM')">
                <i class="bi bi-moon"></i>
            </button>
            </div>
        </div>
        <div class="col-4">
            <div class="ratio ratio-1x1">
            <button class="vac-btn-success rounded-circle d-flex align-items-center justify-content-center" @click="addVacationRequests"
                :class="{ active: !isDisabled, disabled: isDisabled }">
                ✔
            </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineEmits, ref, defineProps, watch } from "vue";

const props = defineProps({
isDisabled: Boolean,
selectedDate: String // 날짜 선택 값을 props로 받음
});

const emit = defineEmits(["toggleHalfDay", "addVacationRequests", "resetHalfDay"]);
const halfDayType = ref(null);

const toggleHalfDay = (type) => {
halfDayType.value = halfDayType.value === type ? null : type;
emit("toggleHalfDay", halfDayType.value);
};

// `selectedDate`가 변경되면 반차 선택 초기화
watch(() => props.selectedDate, (newDate) => {
if (newDate) {
resetHalfDay();
}
});

// 날짜 선택 후 반차 버튼 상태 초기화
const resetHalfDay = () => {
halfDayType.value = null;
emit("resetHalfDay");
};

const addVacationRequests = () => {
emit("addVacationRequests");
};

defineExpose({ resetHalfDay });
</script>

<style scoped>
</style>
