"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectorItemSelector = exports.Selector = void 0;
const react_1 = __importStar(require("react"));
const use_forwarded_ref_1 = require("@bedrock-layout/use-forwarded-ref");
const utils_1 = require("../../../utils");
const Item_1 = require("./Item");
const Selector_styled_1 = require("./Selector.styled");
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] = (0, react_1.useState)(false);
    const [showLeft, setShowLeft] = (0, react_1.useState)(false);
    (0, react_1.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 = (0, react_1.forwardRef)((props, ref) => {
    var _a;
    const innerRef = (0, use_forwarded_ref_1.useForwardedRef)(ref);
    const [current, setCurrent] = (0, react_1.useState)(props.value);
    const { showRight, showLeft } = useScrollIndicators(innerRef, props.multiLine === false);
    const { onChange } = props;
    const handleCurrent = (0, react_1.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 = (0, utils_1.toObjectValue)(v);
        return react_1.default.createElement(Item_1.Item, { key: ov.value, value: ov, onClick: handleCurrent, active: crr === ov.value });
    });
    const multiLineVariant = props.multiLine != null ? { multiLine: props.multiLine } : {};
    const root = (react_1.default.createElement(Selector_styled_1.Root, Object.assign({ ref: innerRef, className: props.className }, multiLineVariant), vals));
    if (props.multiLine === false) {
        return (react_1.default.createElement(Selector_styled_1.Wrapper, null,
            react_1.default.createElement(Selector_styled_1.Arrow, { side: "left", visible: showLeft }, "‹"),
            root,
            react_1.default.createElement(Selector_styled_1.Arrow, { side: "right", visible: showRight }, "›")));
    }
    return root;
});
exports.Selector = Selector;
Selector.displayName = "Selector";
Selector.toString = () => Selector_styled_1.Root.toString();
const SelectorItemSelector = Item_1.Item.toString();
exports.SelectorItemSelector = SelectorItemSelector;
//# sourceMappingURL=Selector.js.map