var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
/* eslint-disable jsx-a11y/no-static-element-interactions */
import { format } from "date-fns";
import React, { forwardRef } from "react";
import { BodyShort } from "../typography/BodyShort.js";
import { cl } from "../utils/helpers/index.js";
import { useI18n } from "../utils/i18n/i18n.hooks.js";
import { useTimelineKeyboardActiveRow, useTimelineKeyboardContext, } from "./hooks/TimelineKeyboardNavProvider.js";
import { PeriodContext } from "./hooks/usePeriodContext.js";
import { useRowContext } from "./hooks/useRowContext.js";
import Period from "./period/index.js";
export const TimelineRow = forwardRef((_a, ref) => {
    var { label, className, headingTag = "h3", icon } = _a, rest = __rest(_a, ["label", "className", "headingTag", "icon"]);
    const { periods } = useRowContext();
    const { updateActiveRow, handleRowKeyDown } = useTimelineKeyboardContext();
    const { activeRow } = useTimelineKeyboardActiveRow();
    const translate = useI18n("Timeline");
    const [elementRefState, setElementRefState] = React.useState(null);
    const latest = periods.reduce((a, b) => {
        return a.end > b.end ? a : b;
    }, {});
    const earliest = periods.reduce((a, b) => {
        return a.end < b.end ? a : b;
    }, {});
    return (React.createElement(React.Fragment, null,
        label &&
            (typeof label === "string" ? (React.createElement(BodyShort, { as: headingTag, className: "aksel-timeline__row-label", size: "small" },
                icon,
                label)) : (React.createElement("div", { className: "aksel-timeline__row-label" }, label))),
        React.createElement("div", { className: cl("aksel-timeline__row", {
                "aksel-timeline__row--active": activeRow === elementRefState,
            }), ref: setElementRefState, tabIndex: -1, onFocusCapture: () => updateActiveRow(elementRefState), onKeyDown: handleRowKeyDown, "data-timeline-row": true },
            React.createElement("ol", Object.assign({}, rest, { ref: ref, "aria-label": periods.length === 0
                    ? translate("Row.noPeriods")
                    : translate("Row.period", {
                        start: format(earliest.start, translate("dateFormat")),
                        end: format(latest.end, translate("dateFormat")),
                    }), className: cl("aksel-timeline__row-periods", className) }), periods === null || periods === void 0 ? void 0 : periods.map((period) => {
                return (React.createElement("li", { key: `period-${period.id}` },
                    React.createElement(PeriodContext.Provider, { value: {
                            periodId: period.id,
                            restProps: period === null || period === void 0 ? void 0 : period.restProps,
                        } },
                        React.createElement(Period, { start: period.start, end: period.endInclusive, icon: period.icon, ref: period === null || period === void 0 ? void 0 : period.ref }))));
            })))));
});
TimelineRow.componentType = "row";
export default TimelineRow;
//# sourceMappingURL=TimelineRow.js.map