import { FloatingFocusManager, autoUpdate, flip, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFocus, useHover, useInteractions, } from "@floating-ui/react";
import React, { useState } from "react";
import { cl } from "../../utils/helpers/index.js";
import { useMergeRefs } from "../../utils/hooks/index.js";
import { useI18n } from "../../utils/i18n/i18n.hooks.js";
import { ariaLabel, getConditionalClasses } from "../utils/period.js";
const ClickablePeriod = React.memo(({ onSelectPeriod, start, end, status, cropped, direction, left, width, icon, children, isActive, statusLabel, restProps, periodRef, }) => {
    var _a, _b;
    const [open, setOpen] = useState(false);
    const translate = useI18n("Timeline");
    const { context, placement, refs, floatingStyles } = useFloating({
        placement: (_a = restProps === null || restProps === void 0 ? void 0 : restProps.placement) !== null && _a !== void 0 ? _a : "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, periodRef);
    const label = ariaLabel(start, end, status, statusLabel, translate);
    if (width === 0 || !Number.isFinite(width)) {
        return null;
    }
    if (!Number.isFinite(left)) {
        return null;
    }
    return (React.createElement(React.Fragment, null,
        React.createElement("button", Object.assign({ "data-timeline-period": true }, restProps, { "data-color": (_b = restProps === null || restProps === void 0 ? void 0 : restProps["data-color"]) !== null && _b !== void 0 ? _b : status, type: "button", ref: mergedRef, "aria-label": label, className: cl("aksel-timeline__period--clickable", getConditionalClasses(cropped, direction, status), restProps === null || restProps === void 0 ? void 0 : restProps.className, {
                "aksel-timeline__period--selected": isActive,
            }), "aria-expanded": children ? open : undefined, "aria-current": isActive || undefined }, getReferenceProps({
            onKeyDown: (e) => {
                var _a;
                (_a = restProps === null || restProps === void 0 ? void 0 : restProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
                if (e.key === " ") {
                    onSelectPeriod === null || onSelectPeriod === void 0 ? void 0 : onSelectPeriod(e);
                }
            },
            style: {
                width: `${width.toFixed(3)}%`,
                [direction]: `${left.toFixed(3)}%`,
            },
            onClick: (e) => {
                var _a;
                (_a = restProps === null || restProps === void 0 ? void 0 : restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
                if (e.detail === 0) {
                    return;
                }
                onSelectPeriod === null || onSelectPeriod === void 0 ? void 0 : onSelectPeriod(e);
            },
        })),
            React.createElement("span", { className: "aksel-timeline__period--inner" }, icon)),
        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 ClickablePeriod;
//# sourceMappingURL=ClickablePeriod.js.map