"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MonthPickerCaption = void 0;
const date_fns_1 = require("date-fns");
const react_1 = __importDefault(require("react"));
const aksel_icons_1 = require("@navikt/aksel-icons");
const button_1 = require("../../../button");
const select_1 = require("../../../form/select");
const Date_locale_1 = require("../../Date.locale");
const MonthPicker_context_1 = require("../MonthPicker.context");
const MonthPickerCaption = ({ popupLabelId }) => {
    const { fromDate, toDate, locale, year, onYearChange, caption } = (0, MonthPicker_context_1.useMonthPickerContext)();
    const translate = (0, Date_locale_1.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((0, date_fns_1.setYear)((0, date_fns_1.startOfYear)(new Date()), currYear));
        }
        if (!years.map((x) => x.getFullYear()).includes(year.getFullYear())) {
            years.push((0, date_fns_1.setYear)((0, date_fns_1.startOfYear)(new Date()), year.getFullYear()));
        }
        years.sort((a, b) => b.getFullYear() - a.getFullYear());
    }
    const handleYearChange = (event) => {
        onYearChange((0, date_fns_1.setYear)((0, date_fns_1.startOfMonth)(new Date()), Number(event.target.value)));
    };
    const handleButtonClick = (val) => {
        const newYear = Number(year.getFullYear() + val);
        onYearChange((0, date_fns_1.setYear)(year, newYear));
    };
    const disablePreviousYear = () => {
        return fromDate
            ? (0, date_fns_1.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
            ? (0, date_fns_1.isAfter)((year === null || year === void 0 ? void 0 : year.getFullYear()) + 1, toDate === null || toDate === void 0 ? void 0 : toDate.getFullYear())
            : false;
    };
    return (react_1.default.createElement("div", { className: "aksel-date__caption" },
        caption === "dropdown" && (react_1.default.createElement("span", { "aria-live": "polite", "aria-atomic": "true", className: "aksel-sr-only", id: popupLabelId }, year.getFullYear())),
        react_1.default.createElement(button_1.Button, { className: "aksel-date__caption-button", disabled: disablePreviousYear(), onClick: () => handleButtonClick(-1), icon: react_1.default.createElement(aksel_icons_1.ArrowLeftIcon, { title: translate("goToPreviousYear") }), variant: "tertiary-neutral", type: "button" }),
        caption === "dropdown" ? (react_1.default.createElement(select_1.Select, { label: translate("year"), hideLabel: true, value: year.getFullYear(), onChange: handleYearChange, className: "aksel-date__caption__year" }, years.map((yearOpt) => (react_1.default.createElement("option", { key: yearOpt.getFullYear(), value: yearOpt.getFullYear() }, (0, date_fns_1.format)(yearOpt, "yyyy", { locale })))))) : (react_1.default.createElement("span", { className: "aksel-date__year-label", "aria-live": "polite", id: popupLabelId }, year.getFullYear())),
        react_1.default.createElement(button_1.Button, { className: "aksel-date__caption-button", disabled: disableNextYear(), onClick: () => handleButtonClick(1), icon: react_1.default.createElement(aksel_icons_1.ArrowRightIcon, { title: translate("goToNextYear") }), variant: "tertiary-neutral", type: "button" })));
};
exports.MonthPickerCaption = MonthPickerCaption;
//# sourceMappingURL=MonthPicker.Caption.js.map