<script setup>
import { ref, computed, watch } from 'vue';
import { format, parse, parseISO, isValid } from 'date-fns';

const props = defineProps({
    modelValue: String, // ค่าที่รับมาจาก GanttCalendar.vue
});

const emits = defineEmits(["update:modelValue"]);

// ใช้ ref เก็บค่า selectedDate
const selectedDate = ref(props.modelValue ? parseDateDMY(props.modelValue) : new Date());

// ฟังก์ชันแปลง `d/M/yyyy` หรือ `yyyy-MM-dd` → `Date`
function parseDateDMY(dateString) {
    if (!dateString) return new Date();

    try {
        const parts = dateString.includes('-') ? dateString.split('-') : dateString.split('/');

        if (parts.length !== 3) throw new Error("Invalid date format");

        const day = parseInt(parts[0], 10);
        const month = parseInt(parts[1], 10) - 1; // `month` ใน JavaScript เริ่มที่ 0
        const year = parseInt(parts[2], 10);

        // ถ้าปีเป็นสองหลัก ให้บวก 2000 เข้าไป
        const fullYear = year < 100 ? year + 2000 : year;

        const parsedDate = new Date(fullYear, month, day);

        if (!isValid(parsedDate)) throw new Error("Invalid parsed date");

        return parsedDate;
    } catch (error) {
        console.error("📅 parseDateDMY ERROR:", error, "ค่าที่รับมา:", dateString);
        return new Date();
    }
}

// ฟังก์ชันแปลง `Date` → `d/M/yyyy`
const formattedDate = computed(() => {
    if (!selectedDate.value) return null;
    const date = new Date(selectedDate.value);
    return format(date, 'd/M/yyyy');
});

// watch `formattedDate` แล้ว emit กลับไปที่ `GanttCalendar.vue`
watch(formattedDate, (newValue) => {
    if (newValue !== null) {
        console.log("📅 CalendarPicker - ส่งค่ากลับไปเป็น:", newValue);
        emits("update:modelValue", newValue);
    }
});

// ฟังก์ชันอัปเดตวันที่จาก `v-date-picker`
const updateSelectedDate = (newValue) => {
    selectedDate.value = newValue;
};

// ฟังก์ชันสลับเปิด-ปิด Date Picker
const showDatePicker = ref(false);
const toggleDatePicker = () => {
    showDatePicker.value = !showDatePicker.value;
};

</script>



<template>
    <v-container>
        <v-row justify="center">
            <v-date-picker v-model="selectedDate" color="#96A9DB" class="custom-date-picker"
                @update:modelValue="updateSelectedDate">
            </v-date-picker>
        </v-row>
    </v-container>
</template>

<style scoped>
/* ✅ ปรับขนาด v-date-picker */
.custom-date-picker {
    width: 350px !important;
    /* ✅ ลดความกว้าง */
    height: 390px !important;
    max-width: 350px;
    font-size: 14px !important;
    /* ✅ ลดขนาดตัวอักษร */
    border-radius: 20px !important;
    /* ✅ ทำให้ขอบโค้งมน */
}

/* ✅ ลดขนาดของตัวอักษรวันที่ (Mon, Jan 1) */
:deep(.v-date-picker-title) {
    font-size: 14px !important;
}

/* ✅ ปรับขนาดปุ่มวันที่ */
:deep(.v-date-picker .v-btn) {
    min-width: 32px !important;
    /* ✅ ลดความกว้างของปุ่ม */
    height: 32px !important;
    /* ✅ ลดความสูงของปุ่ม */
    font-size: 15px !important;
    /* ✅ ลดขนาดตัวเลขในปฏิทิน */
    border-radius: 60px !important;
    /* ✅ ทำให้ปุ่มโค้งมน */
}

/* ✅ ปรับขนาดชื่อเดือน-ปี */
:deep(.v-date-picker-header) {
    font-size: 16px !important;
}

/* ✅ ปรับขนาดตัวอักษรชื่อวันในสัปดาห์ (S, M, T, W, T, F, S) */
:deep(.v-date-picker .v-date-picker-weekdays) {
    font-size: 12px !important;
}
</style>