(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "tslib", "react", "../hooks/useDebounce", "../hooks/useStateProps", "../hooks/useResizeObserver", "./styles"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.SegmentedControl = void 0;
    var tslib_1 = require("tslib");
    var react_1 = (0, tslib_1.__importStar)(require("react"));
    var useDebounce_1 = (0, tslib_1.__importDefault)(require("../hooks/useDebounce"));
    var useStateProps_1 = require("../hooks/useStateProps");
    var useResizeObserver_1 = require("../hooks/useResizeObserver");
    var styles_1 = require("./styles");
    var SegmentedControl = function (_a) {
        var className = _a.className, options = _a.options, value = _a.value, _b = _a.size, size = _b === void 0 ? "l" : _b, onChange = _a.onChange, props = (0, tslib_1.__rest)(_a, ["className", "options", "value", "size", "onChange"]);
        var _c = (0, tslib_1.__read)((0, react_1.useState)({}), 2), selectPosition = _c[0], setSelection = _c[1];
        var _d = (0, tslib_1.__read)((0, useStateProps_1.useStateProps)(value), 2), selectedValue = _d[0], setValue = _d[1];
        var ref = (0, react_1.useRef)({});
        var segmentedControlRef = (0, react_1.useRef)(null);
        var _e = (0, tslib_1.__read)((0, react_1.useState)(0), 2), segmentedControlWidth = _e[0], setSegmentedControlWidth = _e[1];
        var setSegmentedControlWidthDebounce = (0, useDebounce_1.default)(setSegmentedControlWidth, 100);
        var optionalCallback = function (entry) {
            return setSegmentedControlWidthDebounce(entry.width);
        };
        (0, useResizeObserver_1.useResizeObserver)(segmentedControlRef, optionalCallback);
        (0, react_1.useEffect)(function () {
            if (selectedValue && ref.current[selectedValue]) {
                var selectedOption = options.find(function (opt) { return opt.value === selectedValue; });
                if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.isDisabled) {
                    setSelection({});
                    return;
                }
                setSelection({
                    left: ref.current[selectedValue].offsetLeft,
                    width: ref.current[selectedValue].getBoundingClientRect().width
                });
            }
        }, [ref.current, selectedValue, segmentedControlWidth, options]);
        var handleClick = function (_value) {
            setValue(_value);
            onChange === null || onChange === void 0 ? void 0 : onChange(_value);
        };
        return (react_1.default.createElement(styles_1.SegmentedControlWrapper, (0, tslib_1.__assign)({ className: className }, props),
            react_1.default.createElement(styles_1.SegmentedControlBase, { ref: segmentedControlRef, size: size },
                react_1.default.createElement(styles_1.Bracket, { bracketPosition: selectPosition }),
                options.map(function (opt) { return (react_1.default.createElement(styles_1.ControlItem, { forwardedAs: "div", type: "phoenix", isDisabled: opt.isDisabled, isPressed: opt.value === selectedValue, key: opt.value, ref: function (el) { return (ref.current[opt.value] = el); }, onClick: function () { return !opt.isDisabled && handleClick(opt.value); } },
                    react_1.default.createElement(react_1.default.Fragment, null,
                        opt.label,
                        opt.icon && opt.icon))); }))));
    };
    exports.SegmentedControl = SegmentedControl;
});
