import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "../../../../../../ui/components/icon/index.js";
import { cn } from "../../../../../../scalars/lib/index.js";
import { differenceInCalendarDays } from "date-fns";
import { useCallback, useMemo } from "react";
import { useDayPicker } from "react-day-picker";
import { Button } from "../../../../../../scalars/components/fragments/button/index.js";
const NavCalendar = ({ className, navView, displayYears, setDisplayYears, onPrevClick, onNextClick, startMonth, endMonth, buttonPreviousClassName, buttonNextClassName, }) => {
    const { nextMonth, previousMonth, goToMonth } = useDayPicker();
    // Function to check if the "Previous" button should be disabled
    const isPreviousDisabled = useMemo(() => {
        if (navView === "years") {
            const previousYearDate = new Date(displayYears.from - 1, 0, 1);
            return ((startMonth &&
                differenceInCalendarDays(previousYearDate, startMonth) < 0) ||
                (endMonth && differenceInCalendarDays(previousYearDate, endMonth) > 0));
        }
        return !previousMonth;
    }, [navView, displayYears, startMonth, endMonth, previousMonth]);
    // Function to check if the "Next" button should be disabled
    const isNextDisabled = useMemo(() => {
        if (navView === "years") {
            const nextYearDate = new Date(displayYears.to + 1, 0, 1);
            return ((startMonth &&
                differenceInCalendarDays(nextYearDate, startMonth) < 0) ||
                (endMonth && differenceInCalendarDays(nextYearDate, endMonth) > 0));
        }
        return !nextMonth;
    }, [navView, displayYears, startMonth, endMonth, nextMonth]);
    const handlePreviousClick = useCallback(() => {
        if (!previousMonth)
            return;
        if (navView === "years") {
            const newDisplayYears = {
                from: displayYears.from - (displayYears.to - displayYears.from + 1),
                to: displayYears.to - (displayYears.to - displayYears.from + 1),
            };
            setDisplayYears(newDisplayYears);
            onPrevClick?.(new Date(displayYears.from - (displayYears.to - displayYears.from), 0, 1));
            return;
        }
        goToMonth(previousMonth);
        onPrevClick?.(previousMonth);
    }, [
        previousMonth,
        goToMonth,
        navView,
        displayYears,
        setDisplayYears,
        onPrevClick,
    ]);
    const handleNextClick = useCallback(() => {
        if (!nextMonth)
            return;
        if (navView === "years") {
            const newDisplayYears = {
                from: displayYears.from + (displayYears.to - displayYears.from + 1),
                to: displayYears.to + (displayYears.to - displayYears.from + 1),
            };
            setDisplayYears(newDisplayYears);
            onNextClick?.(new Date(displayYears.from + (displayYears.to - displayYears.from), 0, 1));
            return;
        }
        goToMonth(nextMonth);
        onNextClick?.(nextMonth);
    }, [
        nextMonth,
        goToMonth,
        navView,
        displayYears,
        setDisplayYears,
        onNextClick,
    ]);
    return (_jsxs("nav", { className: cn("flex items-center", className), children: [_jsx(Button, { variant: "outline", className: cn("absolute left-0 size-7 bg-transparent p-0 opacity-80 hover:opacity-100", buttonPreviousClassName), type: "button", tabIndex: isPreviousDisabled ? undefined : -1, disabled: isPreviousDisabled, "aria-label": navView === "years"
                    ? `Go to the previous ${displayYears.to - displayYears.from + 1} years`
                    : `Previous month`, onClick: handlePreviousClick, children: _jsx(Icon, { className: "size-4", name: "CaretLeft" }) }), _jsx(Button, { variant: "outline", className: cn("absolute right-0 size-7 bg-transparent p-0 opacity-80 hover:opacity-100", buttonNextClassName), type: "button", tabIndex: isNextDisabled ? undefined : -1, disabled: isNextDisabled, "aria-label": navView === "years"
                    ? `Go to the next ${displayYears.to - displayYears.from + 1} years`
                    : `Next month`, onClick: handleNextClick, children: _jsx(Icon, { className: "size-4", name: "CaretRight" }) })] }));
};
export default NavCalendar;
//# sourceMappingURL=calendar-nav.js.map