<template>
    <div class="row gx-2 mb-4">
        <div class="col-3">
            <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 d-flex"></i>
                </button>
            </div>
        </div>
        <div class="col-3">
            <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 d-flex"></i>
                </button>
            </div>
        </div>
        <div class="col-3">
            <div class="ratio ratio-1x1">
                <!-- 풀 연차 버튼 -->
                <button class="vac-btn vac-btn-primary rounded-circle d-flex align-items-center justify-content-center"
                    :class="{ active: halfDayType === 'FULL' }"
                    @click="toggleHalfDay('FULL')">
                    <i class="bi bi-calendar d-flex"></i>
                </button>
            </div>
        </div>
        <div class="col-3">
            <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 } from "vue";

const props = defineProps({
    isDisabled: Boolean
});

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

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

// 날짜 클릭 후 버튼 상태 자동 초기화
const resetHalfDay = () => {
    halfDayType.value = null;
    emit("resetHalfDay");
};

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

defineExpose({ resetHalfDay });
</script>
