import { addDays, addMonths, addYears, differenceInDays, differenceInMonths, differenceInYears, endOfMonth, endOfYear, format, startOfDay, startOfMonth, startOfYear, subDays, } from "date-fns";
import React, { useCallback, useMemo } from "react";
import { Detail } from "../typography/Detail.js";
import { useDateLocale, useI18n } from "../utils/i18n/i18n.hooks.js";
import { useTimelineContext } from "./hooks/useTimelineContext.js";
import { isVisible } from "./utils/index.js";
import { horizontalPositionAndWidth } from "./utils/calc.js";
export const dayLabels = (start, end, totalDays, direction, template, locale) => {
    const increment = Math.ceil(totalDays / 10);
    const lastDay = startOfDay(end);
    const count = Math.ceil(totalDays / increment);
    return Array.from({ length: count }, (_, i) => {
        const day = subDays(lastDay, i * increment);
        const { horizontalPosition, width } = horizontalPositionAndWidth(day, addDays(day, 1), start, end);
        return {
            direction,
            horizontalPosition,
            label: format(day, template, { locale }),
            date: day,
            width,
        };
    });
};
export const monthLabels = (start, end, direction, template, locale) => {
    const startMonth = startOfMonth(start);
    const endMonth = endOfMonth(end);
    const numberOfMonths = differenceInMonths(endMonth, startMonth) + 1;
    return Array.from({ length: numberOfMonths }, (_, i) => {
        const month = addMonths(startMonth, i);
        const { horizontalPosition, width } = horizontalPositionAndWidth(month, addMonths(month, 1), start, end);
        return {
            direction,
            horizontalPosition,
            label: format(month, template, { locale }),
            date: month,
            width,
        };
    });
};
export const yearLabels = (start, end, direction, template, locale) => {
    const firstYear = startOfYear(start);
    const lastYear = endOfYear(end);
    const yearCount = differenceInYears(lastYear, start) + 1;
    return Array.from({ length: yearCount }, (_, i) => {
        const year = addYears(firstYear, i);
        const { horizontalPosition, width } = horizontalPositionAndWidth(year, addYears(year, 1), start, end);
        return {
            direction,
            horizontalPosition,
            label: format(year, template, { locale }),
            date: year,
            width,
        };
    });
};
const getLabels = (start, end, direction, locale, translate) => {
    const totalDays = differenceInDays(end, start);
    /* Zero or negative total days can break further calculations */
    if (totalDays <= 0) {
        return [];
    }
    if (totalDays < 40) {
        const dayTemplate = translate("dayFormat");
        return dayLabels(start, end, totalDays, direction, dayTemplate, locale);
    }
    if (totalDays < 370) {
        const monthTemplate = translate("monthFormat");
        return monthLabels(start, end, direction, monthTemplate, locale);
    }
    const yearTemplate = translate("yearFormat");
    return yearLabels(start, end, direction, yearTemplate, locale);
};
export const AxisLabels = ({ templates, }) => {
    const { endDate, startDate, direction } = useTimelineContext();
    const translate = useI18n("Timeline", {
        dayFormat: templates === null || templates === void 0 ? void 0 : templates.day,
        monthFormat: templates === null || templates === void 0 ? void 0 : templates.month,
        yearFormat: templates === null || templates === void 0 ? void 0 : templates.year,
    });
    const locale = useDateLocale();
    const labels = useMemo(() => getLabels(startDate, endDate, direction, locale, translate)
        .filter(isVisible)
        .sort((a, b) => a.horizontalPosition - b.horizontalPosition), [startDate, endDate, direction, locale, translate]);
    const getLabelWidth = useCallback((index) => {
        const next = labels[index + 1];
        const bound = next ? next.horizontalPosition : 100;
        return `${(bound - labels[index].horizontalPosition).toFixed(3)}%`;
    }, [labels]);
    const justifyContent = direction === "left" ? "flex-start" : "flex-end";
    return (React.createElement("div", { className: "aksel-timeline__axislabels", "aria-hidden": "true" }, labels.map((etikett, index) => (React.createElement(Detail, { className: "aksel-timeline__axislabels-label", as: "div", key: etikett.label, style: {
            justifyContent,
            [direction]: `${etikett.horizontalPosition.toFixed(3)}%`,
            width: getLabelWidth(index),
        } }, etikett.label)))));
};
//# sourceMappingURL=AxisLabels.js.map