import React, { useMemo } from "react";
import { useDayPicker } from "react-day-picker";
import { Button } from "../../../button/index.js";
import { Hide, Show } from "../../../primitives/responsive/index.js";
import { Detail } from "../../../typography/index.js";
import { cl } from "../../../utils/helpers/index.js";
import { useDateTranslationContext } from "../../Date.locale.js";
const DatePickerWeekNumber = ({ week: { weekNumber, days }, onWeekNumberClick, className, style, showOnDesktop, }) => {
    const translate = useDateTranslationContext().translate;
    const { getModifiers } = useDayPicker();
    const hideWeek = useMemo(() => {
        if (days.filter((day) => {
            const mods = getModifiers(day);
            return !(mods.hidden || mods.outside || mods.disabled);
        }).length === 0) {
            return true;
        }
        return false;
    }, [days, getModifiers]);
    const DisplayMode = showOnDesktop ? Show : Hide;
    if (!onWeekNumberClick || hideWeek) {
        return (React.createElement(DisplayMode, { above: "sm", asChild: true },
            React.createElement("td", { className: "rdp-cell" },
                React.createElement(Detail, { as: "span", textColor: "subtle", className: className, style: style, "aria-label": translate("weekNumber", { week: weekNumber }) }, weekNumber))));
    }
    return (React.createElement(DisplayMode, { above: "sm", asChild: true },
        React.createElement("td", { className: cl("rdp-cell", {
                "aksel-date__week-wrapper": !showOnDesktop,
            }) },
            React.createElement(Button, { variant: "secondary-neutral", size: "small", name: "week-number", "aria-label": translate("selectWeekNumber", { week: weekNumber }), style: style, className: "aksel-date__weeknumber rdp-weeknumber", onClick: () => {
                    onWeekNumberClick(weekNumber, days.map((day) => day.date));
                }, icon: React.createElement("span", { className: "aksel-date__weeknumber-number" }, weekNumber) }))));
};
export { DatePickerWeekNumber };
//# sourceMappingURL=DatePicker.WeekNumber.js.map