import React, { forwardRef, useCallback, useEffect, useState } from "react";
import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
import { toObjectValue } from "../../../utils/index.js";
import { Item } from "./Item.js";
import { Arrow, Root, Wrapper } from "./Selector.styled.js";
const FADE_SIZE = "62px";
const fadeRight = `linear-gradient(to right, black calc(100% - ${FADE_SIZE}), transparent)`;
const fadeLeft = `linear-gradient(to left, black calc(100% - ${FADE_SIZE}), transparent)`;
const fadeBoth = [
    `linear-gradient(to right, transparent, black ${FADE_SIZE}, black calc(100% - ${FADE_SIZE}), transparent)`,
].join("");
const useScrollIndicators = (ref, enabled) => {
    const [showRight, setShowRight] = useState(false);
    const [showLeft, setShowLeft] = useState(false);
    useEffect(() => {
        if (!enabled) {
            return;
        }
        const el = ref.current;
        const update = () => {
            const canScroll = el.scrollWidth > el.clientWidth;
            const atStart = el.scrollLeft <= 1;
            const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
            const right = canScroll && !atEnd;
            const left = canScroll && !atStart;
            setShowRight(right);
            setShowLeft(left);
            let mask = "";
            if (left && right) {
                mask = fadeBoth;
            }
            else if (right) {
                mask = fadeRight;
            }
            else if (left) {
                mask = fadeLeft;
            }
            el.style.maskImage = mask;
        };
        update();
        el.addEventListener("scroll", update, { passive: true });
        const ro = new ResizeObserver(update);
        ro.observe(el);
        return () => {
            el.removeEventListener("scroll", update);
            ro.disconnect();
        };
    }, [ref, enabled]);
    return { showRight, showLeft };
};
const Selector = forwardRef((props, ref) => {
    var _a;
    const innerRef = useForwardedRef(ref);
    const [current, setCurrent] = useState(props.value);
    const { showRight, showLeft } = useScrollIndicators(innerRef, props.multiLine === false);
    const { onChange } = props;
    const handleCurrent = useCallback((value) => {
        setCurrent(value);
        onChange === null || onChange === void 0 ? void 0 : onChange(value);
    }, [onChange]);
    const crr = (_a = props.value) !== null && _a !== void 0 ? _a : current;
    const vals = props.values.map(v => {
        const ov = toObjectValue(v);
        return React.createElement(Item, { key: ov.value, value: ov, onClick: handleCurrent, active: crr === ov.value });
    });
    const multiLineVariant = props.multiLine != null ? { multiLine: props.multiLine } : {};
    const root = (React.createElement(Root, { ref: innerRef, className: props.className, ...multiLineVariant }, vals));
    if (props.multiLine === false) {
        return (React.createElement(Wrapper, null,
            React.createElement(Arrow, { side: "left", visible: showLeft }, "‹"),
            root,
            React.createElement(Arrow, { side: "right", visible: showRight }, "›")));
    }
    return root;
});
Selector.displayName = "Selector";
Selector.toString = () => Root.toString();
const SelectorItemSelector = Item.toString();
export { Selector, SelectorItemSelector };
//# sourceMappingURL=Selector.js.map