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;
};
import { FloatingFocusManager, autoUpdate, flip, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFocus, useHover, useInteractions, } from "@floating-ui/react";
import { format } from "date-fns";
import React, { forwardRef, useMemo, useState } from "react";
import { useMergeRefs } from "../../utils/hooks/index.js";
import { useI18n } from "../../utils/i18n/i18n.hooks.js";
import { useTimelineKeyboardContext } from "../hooks/TimelineKeyboardNavProvider.js";
import { useTimelineContext } from "../hooks/useTimelineContext.js";
import { position } from "../utils/calc.js";
export const PinInternal = forwardRef((_a, ref) => {
    var { date, children } = _a, rest = __rest(_a, ["date", "children"]);
    const { startDate, endDate, direction } = useTimelineContext();
    const { handlePinKeyDown } = useTimelineKeyboardContext();
    const [open, setOpen] = useState(false);
    const translate = useI18n("Timeline");
    const { context, placement, refs, floatingStyles } = useFloating({
        placement: "top",
        open,
        onOpenChange: (_open) => setOpen(_open),
        whileElementsMounted: autoUpdate,
        middleware: [
            offset(8),
            shift(),
            flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
        ],
    });
    const hover = useHover(context, {
        handleClose: safePolygon(),
        restMs: 25,
        delay: { open: 1000 },
        move: false,
    });
    const focus = useFocus(context);
    const dismiss = useDismiss(context);
    const click = useClick(context);
    const { getFloatingProps, getReferenceProps } = useInteractions([
        click,
        hover,
        focus,
        dismiss,
    ]);
    const mergedRef = useMergeRefs(refs.setReference, ref);
    const label = translate("Pin.pin", {
        date: format(date, translate("dateFormat")),
    });
    const pinPositionStyle = useMemo(() => {
        const pinPosition = position(date, startDate, endDate);
        return Number.isFinite(pinPosition) ? `${pinPosition.toFixed(3)}%` : "0%";
    }, [date, endDate, startDate]);
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: "aksel-timeline__pin-wrapper", style: { [direction]: pinPositionStyle } },
            React.createElement("button", Object.assign({ "data-timeline-pin": true }, rest, { ref: mergedRef, className: "aksel-timeline__pin-button", "aria-label": label, type: "button", "aria-expanded": children ? open : undefined }, getReferenceProps({
                onKeyDown: (e) => {
                    var _a;
                    (_a = rest === null || rest === void 0 ? void 0 : rest.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(rest, e);
                    handlePinKeyDown(e);
                },
            })))),
        children && open && (React.createElement(FloatingFocusManager, { context: context, modal: false, initialFocus: -1, returnFocus: true },
            React.createElement("div", Object.assign({ className: "aksel-timeline__popover", "data-timeline-popover": true, "data-placement": placement, ref: refs.setFloating, role: "dialog", "aria-label": label }, getFloatingProps(), { style: floatingStyles }), children)))));
});
export default PinInternal;
//# sourceMappingURL=PinInternal.js.map