"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (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 (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tabs = void 0;
var react_1 = __importStar(require("react"));
var react_hooks_1 = require("@devesharp/react-hooks");
var resize_observer_1 = __importDefault(require("@react-hook/resize-observer"));
var S = __importStar(require("./Tabs.style"));
exports.Tabs = react_1.default.forwardRef(function Tabs(_a, ref) {
    var options = _a.options, onSelect = _a.onSelect, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.skeleton, skeleton = _c === void 0 ? false : _c, defaultTab = _a.defaultTab, backgroundActiveColor = _a.backgroundActiveColor, textActiveColor = _a.textActiveColor, textColor = _a.textColor, activeButtonRounded = _a.activeButtonRounded;
    var indexDefault = react_1.useMemo(function () { return options.findIndex(function (i) { return i.id === defaultTab; }); }, [options]);
    var _d = react_1.useState(indexDefault === -1 ? 0 : indexDefault), selectTabIndex = _d[0], setSelectTabIndex = _d[1];
    var _e = react_1.useState({}), selectorStyle = _e[0], setSelectorStyle = _e[1];
    var tabRefs = react_1.useRef({});
    var tabContainerRef = react_1.useRef();
    react_1.useImperativeHandle(ref, function () { return ({
        setTab: function (tab) {
            var indexTab = options.findIndex(function (i) { return i.id === tab; });
            if (indexTab !== -1) {
                setSelectTabIndex(indexTab);
                var currentTab = options.find(function (i) { return i.id === tab; });
                setSelectorPosition(currentTab, indexTab);
            }
        },
        getTab: function () {
            return options[selectTabIndex];
        },
    }); }, [options, selectTabIndex]);
    react_hooks_1.useDidUpdateEffect(function () {
        onSelect(options[selectTabIndex]);
    }, [selectTabIndex]);
    var setTab = react_1.useCallback(function setTab(item, indexTab) {
        setSelectTabIndex(function (currentSelect) {
            if (currentSelect !== indexTab) {
                return indexTab;
            }
            return currentSelect;
        });
    }, []);
    function onSetTab(item, i) {
        setSelectorPosition(item, i);
        return !disabled && !skeleton && setTab(item, i);
    }
    react_1.useLayoutEffect(function () {
        setSelectorPosition(options[selectTabIndex], selectTabIndex, false);
    }, []);
    function setSelectorPosition(tab, i, animation) {
        if (animation === void 0) { animation = true; }
        var _a = tabRefs.current[i], clientWidth = _a.clientWidth, clientHeight = _a.clientHeight, offsetLeft = _a.offsetLeft, offsetTop = _a.offsetTop;
        setSelectorStyle({
            width: clientWidth + "px",
            height: clientHeight + "px",
            left: offsetLeft + "px",
            top: offsetTop + "px",
            transition: animation ? '200ms all ease-in-out' : null,
        });
        scrollToLeft(tabContainerRef.current, offsetLeft - clientWidth / 2 + clientWidth / 2, 100);
    }
    function scrollToLeft(element, to, duration) {
        var start = element.scrollLeft;
        var change = to - start;
        var currentTime = 0;
        var increment = 20;
        var easeInOutQuad = function (t, b, c, d) {
            t /= d / 2;
            if (t < 1) {
                return (c / 2) * t * t + b;
            }
            t -= 1;
            return (-c / 2) * (t * (t - 2) - 1) + b;
        };
        var animateScroll = function () {
            currentTime += increment;
            var val = easeInOutQuad(currentTime, start, change, duration);
            element.scrollLeft = val;
            if (currentTime < duration) {
                setTimeout(animateScroll, increment);
            }
        };
        animateScroll();
    }
    function onUpdateSize() {
        setSelectorPosition(options[selectTabIndex], selectTabIndex, false);
    }
    return (react_1.default.createElement(S.TabsContainer, { textColor: textColor, backgroundActiveColor: backgroundActiveColor, textActiveColor: textActiveColor, activeButtonRounded: activeButtonRounded },
        react_1.default.createElement("div", { className: "tabs", ref: tabContainerRef },
            react_1.default.createElement("div", { className: "tab-selector", "data-testid": "tab-selector", style: selectorStyle }),
            options &&
                options.map(function (item, i) { return (react_1.default.createElement(Tab, { key: i, index: i, item: item, onSetTab: onSetTab, selectTabIndex: selectTabIndex, skeleton: skeleton, tabRefs: tabRefs, onUpdateSize: onUpdateSize })); }))));
});
function Tab(_a) {
    var index = _a.index, item = _a.item, onSetTab = _a.onSetTab, selectTabIndex = _a.selectTabIndex, skeleton = _a.skeleton, tabRefs = _a.tabRefs, onUpdateSize = _a.onUpdateSize;
    var ref = react_1.useRef();
    resize_observer_1.default(ref, function (entry) {
        onUpdateSize();
    });
    return (react_1.default.createElement("div", { key: index, "data-index": index, "data-testid": "tab-" + item.id, className: "tab " + (index === selectTabIndex && 'active'), onClick: function () { return onSetTab(item, index); }, ref: function (_ref) {
            tabRefs.current[index] = _ref;
            ref.current = _ref;
        } },
        react_1.default.createElement("span", { className: "" + (skeleton && 'skeleton') }, item.name)));
}
//# sourceMappingURL=Tabs.js.map