import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useDayPicker } from 'react-day-picker';
import { YearGrid } from './year-view/year-grid.js';
import CalendarDateFooter from './calendar-date-footer/calendar-date-footer.js';
import { MonthView } from './months-view/month-view.js';
import { format } from 'date-fns';
import { MONTHS } from './utils.js';
import { cn } from '../../../../../scalars/lib/utils.js';
import { getDateFormat } from '../../date-time-picker/utils.js';
const MonthGrid = ({ navView, displayYears, startMonth, endMonth, setNavView, className, children, dateFormat, handleCalendarMonthYearSelect, ...props }) => {
    const { goToMonth, months } = useDayPicker();
    const internalFormat = getDateFormat(dateFormat ?? '');
    const monthFormat = ['yyyy-MM', 'MM/yyyy', 'MM/yyyy', 'MMM-yyyy', 'YYYY'].includes(internalFormat);
    const yearFormat = dateFormat === 'YYYY';
    const actualYear = format(months[0].date, 'yyyy');
    const actualMonth = format(months[0].date, 'MMMM');
    if (yearFormat) {
        return (_jsx("div", { className: cn('mt-[18px] flex flex-col gap-2', 'date-picker__year-grid--view'), children: _jsx(YearGrid, { displayYears: displayYears, startMonth: startMonth, endMonth: endMonth, months: months, currentYear: new Date().getFullYear(), onYearSelect: (year) => {
                    handleCalendarMonthYearSelect?.(year, 0);
                } }) }));
    }
    if (monthFormat) {
        if (navView === 'years') {
            return (_jsxs("div", { className: cn('mt-[18px] flex flex-col gap-2', 'date-picker__year-grid--view'), children: [_jsx(YearGrid, { displayYears: displayYears, startMonth: startMonth, endMonth: endMonth, months: months, currentYear: new Date().getFullYear(), onYearSelect: (year) => {
                            goToMonth(new Date(year, MONTHS.indexOf(actualMonth)));
                            setNavView('months');
                        } }), _jsx("div", { children: _jsx(CalendarDateFooter, { navView: navView, setNavView: setNavView }) })] }));
        }
        if (navView === 'months') {
            return (_jsxs("div", { className: cn('mt-[15px] flex flex-col gap-3', 'date-picker__month-grid--view'), children: [_jsx(MonthView, { actualMonth: actualMonth, actualYear: actualYear, onMonthSelect: (year, monthIndex) => {
                            handleCalendarMonthYearSelect?.(year, monthIndex);
                        } }), _jsx("div", { children: _jsx(CalendarDateFooter, { navView: navView, setNavView: setNavView }) })] }));
        }
    }
    if (navView === 'years') {
        return (_jsxs("div", { className: cn('mt-[18px] flex flex-col gap-2', 'date-picker__year-grid--view'), children: [_jsx(YearGrid, { displayYears: displayYears, startMonth: startMonth, endMonth: endMonth, months: months, currentYear: new Date().getFullYear(), onYearSelect: (year) => {
                        goToMonth(new Date(year, MONTHS.indexOf(actualMonth)));
                        setNavView('months');
                    } }), _jsx("div", { children: _jsx(CalendarDateFooter, { navView: navView, setNavView: setNavView }) })] }));
    }
    if (navView === 'months') {
        return (_jsxs("div", { className: cn('mt-[15px] flex flex-col gap-3', 'date-picker__month-grid--view'), children: [_jsx(MonthView, { actualMonth: actualMonth, actualYear: actualYear, onMonthSelect: (year, monthIndex) => {
                        goToMonth(new Date(year, monthIndex));
                        setNavView('days');
                    } }), _jsx("div", { children: _jsx(CalendarDateFooter, { navView: navView, setNavView: setNavView }) })] }));
    }
    return (_jsx("table", { className: className, ...props, children: children }));
};
MonthGrid.displayName = 'MonthGrid';
export { MonthGrid };
//# sourceMappingURL=month-grid.js.map