/*
    작성자 : 박지윤
    작성일 : 2025-03-25
    수정자 :
    수정일 :
    설명   : 달력 데이트 피커
*/

import { ref } from 'vue';
import flatpickr from 'flatpickr';
import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect/index';
import 'flatpickr/dist/flatpickr.min.css';
import 'flatpickr/dist/plugins/monthSelect/style.css';

export function useDatePicker() {
    let fpInstance = null;
    const calendarDatepicker = ref(null);

    const initDatePicker = (fullCalendarRef, onDateChange, options = {}) => {
        // input 요소 동적 생성
        const datePickerInput = document.createElement('input');
        datePickerInput.type = 'text';
        datePickerInput.style.display = 'none';
        document.body.appendChild(datePickerInput);
        calendarDatepicker.value = datePickerInput;

        // Flatpickr 초기화
        fpInstance = flatpickr(calendarDatepicker.value, {
            dateFormat: "Y-m",
            plugins: [
                new monthSelectPlugin({
                    shorthand: true,
                    dateFormat: "Y-m",
                    altFormat: "F Y"
                })
            ],
            onOpen: function() {
                document.querySelector('.flatpickr-input').style.visibility = 'hidden';
            },
            onChange: function(selectedDatesArr, dateStr) {
                // 선택한 달의 첫날로 달력을 이동
                if (fullCalendarRef.value) {
                    fullCalendarRef.value.getApi().gotoDate(dateStr + "-01");
                }

                const [year, month] = dateStr.split("-");

                // onDateChange가 함수인 경우에만 호출
                if (typeof onDateChange === 'function') {
                    onDateChange(parseInt(year, 10), month, options);
                }
            },
            onClose: function() {
                if (calendarDatepicker.value) {
                    calendarDatepicker.value.style.display = "none";
                }
            },
            ...options
        });

        // FullCalendar 년월월(.fc-toolbar-title) 클릭 시 데이트피커 열기
        const titleEl = document.querySelector('.fc-toolbar-title');
        if (titleEl) {
            titleEl.style.cursor = 'pointer';
            titleEl.addEventListener('click', () => {
                const rect = titleEl.getBoundingClientRect();
                const dpEl = calendarDatepicker.value;

                dpEl.style.display = 'block';
                dpEl.style.position = 'fixed';
                dpEl.style.top = `${rect.bottom + window.scrollY}px`;
                dpEl.style.left = `${rect.left + window.scrollX}px`;
                dpEl.style.transform = 'translate(-50%, -50%)';
                dpEl.style.zIndex = '9999';
                dpEl.style.border = 'none';
                dpEl.style.outline = 'none';
                dpEl.style.backgroundColor = 'transparent';

                fpInstance.open();
            });
        }
    };

    const closeDatePicker = () => {
        if (fpInstance) {
            fpInstance.close();
        }
    };

    return {
        initDatePicker,
        closeDatePicker,
        calendarDatepicker
    };
}
