import { format, isAfter, isBefore, setYear, startOfMonth, startOfYear, } from "date-fns";
import React from "react";
import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
import { Button } from "../../../button/index.js";
import { Select } from "../../../form/select/index.js";
import { useDateTranslationContext } from "../../Date.locale.js";
import { useMonthPickerContext } from "../MonthPicker.context.js";
const MonthPickerCaption = ({ popupLabelId }) => {
    const { fromDate, toDate, locale, year, onYearChange, caption } = useMonthPickerContext();
    const translate = useDateTranslationContext().translate;
    const years = [];
    if (caption === "dropdown" && fromDate && toDate) {
        const fromYear = fromDate.getFullYear();
        const toDateYear = toDate.getFullYear();
        for (let currYear = fromYear; currYear <= toDateYear; currYear++) {
            years.push(setYear(startOfYear(new Date()), currYear));
        }
        if (!years.map((x) => x.getFullYear()).includes(year.getFullYear())) {
            years.push(setYear(startOfYear(new Date()), year.getFullYear()));
        }
        years.sort((a, b) => b.getFullYear() - a.getFullYear());
    }
    const handleYearChange = (event) => {
        onYearChange(setYear(startOfMonth(new Date()), Number(event.target.value)));
    };
    const handleButtonClick = (val) => {
        const newYear = Number(year.getFullYear() + val);
        onYearChange(setYear(year, newYear));
    };
    const disablePreviousYear = () => {
        return fromDate
            ? isBefore((year === null || year === void 0 ? void 0 : year.getFullYear()) - 1, fromDate === null || fromDate === void 0 ? void 0 : fromDate.getFullYear())
            : false;
    };
    const disableNextYear = () => {
        return toDate
            ? isAfter((year === null || year === void 0 ? void 0 : year.getFullYear()) + 1, toDate === null || toDate === void 0 ? void 0 : toDate.getFullYear())
            : false;
    };
    return (React.createElement("div", { className: "aksel-date__caption" },
        caption === "dropdown" && (React.createElement("span", { "aria-live": "polite", "aria-atomic": "true", className: "aksel-sr-only", id: popupLabelId }, year.getFullYear())),
        React.createElement(Button, { className: "aksel-date__caption-button", disabled: disablePreviousYear(), onClick: () => handleButtonClick(-1), icon: React.createElement(ArrowLeftIcon, { title: translate("goToPreviousYear") }), variant: "tertiary-neutral", type: "button" }),
        caption === "dropdown" ? (React.createElement(Select, { label: translate("year"), hideLabel: true, value: year.getFullYear(), onChange: handleYearChange, className: "aksel-date__caption__year" }, years.map((yearOpt) => (React.createElement("option", { key: yearOpt.getFullYear(), value: yearOpt.getFullYear() }, format(yearOpt, "yyyy", { locale })))))) : (React.createElement("span", { className: "aksel-date__year-label", "aria-live": "polite", id: popupLabelId }, year.getFullYear())),
        React.createElement(Button, { className: "aksel-date__caption-button", disabled: disableNextYear(), onClick: () => handleButtonClick(1), icon: React.createElement(ArrowRightIcon, { title: translate("goToNextYear") }), variant: "tertiary-neutral", type: "button" })));
};
export { MonthPickerCaption };
//# sourceMappingURL=MonthPicker.Caption.js.map