var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { Children, createRef, useEffect, useRef, useState, isValidElement } from "react";
import { cn } from "@utils";
import { tabsVariants, tabsListVariants, tabsListItemVariants, tabsContentVariants } from "./tabsVariants";
import { keyboardKeys } from "@constants";
export var ETabSizes;
(function (ETabSizes) {
    ETabSizes["XS"] = "xs";
    ETabSizes["SM"] = "sm";
    ETabSizes["MD"] = "md";
    ETabSizes["LG"] = "lg";
})(ETabSizes || (ETabSizes = {}));
export const Tab = React.forwardRef(({ children, className }, ref) => (_jsx("div", { ref: ref, className: className, children: children })));
Tab.displayName = "Tab";
const filterChildren = (children) => {
    return Children.toArray(children).filter((child) => isValidElement(child) &&
        child.type === Tab &&
        child.props.title !== undefined);
};
const TabsComponent = React.forwardRef((_a, ref) => {
    var _b;
    var { className, children, activeIndex, defaultActiveIndex = 0, switchUsingCss = false, onSelect, size = "md", variant = "text", color = "secondary" } = _a, props = __rest(_a, ["className", "children", "activeIndex", "defaultActiveIndex", "switchUsingCss", "onSelect", "size", "variant", "color"]);
    const [activeIdx, setActiveIdx] = useState(() => {
        var _a;
        const childArray = Children.toArray(children);
        if ((_a = childArray[defaultActiveIndex]) === null || _a === void 0 ? void 0 : _a.props.disabled) {
            const nextIndex = childArray.findIndex((child, idx) => child.props.disabled === false &&
                idx > defaultActiveIndex);
            return nextIndex !== -1 ? nextIndex : 0;
        }
        return defaultActiveIndex;
    });
    const [filteredChildren, setFilteredChildren] = useState([]);
    const evalActiveIndex = activeIndex !== null && activeIndex !== void 0 ? activeIndex : activeIdx;
    const noOfChildren = filteredChildren.length;
    const activeTabProps = (_b = filteredChildren[evalActiveIndex]) === null || _b === void 0 ? void 0 : _b.props;
    const tabRefs = useRef([]);
    if (tabRefs.current.length !== noOfChildren) {
        tabRefs.current = filteredChildren.map((_, idx) => tabRefs.current[idx] || createRef());
    }
    const disabledTabIndexes = Children.toArray(children)
        .map((child, idx) => child.props.disabled ? idx : null)
        .filter((idx) => idx !== null);
    useEffect(() => {
        setFilteredChildren(filterChildren(children));
    }, [children]);
    const handleSelect = (tabProps, index) => () => {
        var _a, _b;
        if (index === evalActiveIndex) {
            return;
        }
        (_a = activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.onExit) === null || _a === void 0 ? void 0 : _a.call(activeTabProps);
        if (activeIndex !== undefined) {
            onSelect === null || onSelect === void 0 ? void 0 : onSelect(index);
        }
        else {
            setActiveIdx(index);
        }
        (_b = tabProps.onEnter) === null || _b === void 0 ? void 0 : _b.call(tabProps);
    };
    const handleKeyDown = (event) => {
        var _a, _b, _c, _d, _e, _f;
        if (noOfChildren <= 1) {
            return;
        }
        const { key } = event;
        let reqIndex = evalActiveIndex;
        switch (key) {
            case keyboardKeys.end:
                reqIndex = noOfChildren - 1;
                while (disabledTabIndexes.includes(reqIndex) && reqIndex > 0) {
                    reqIndex--;
                }
                break;
            case keyboardKeys.home:
                reqIndex = 0;
                while (disabledTabIndexes.includes(reqIndex) &&
                    reqIndex < noOfChildren - 1) {
                    reqIndex++;
                }
                break;
            case keyboardKeys.arrowUp:
            case keyboardKeys.arrowLeft:
                event.preventDefault();
                do {
                    reqIndex = (reqIndex - 1 + noOfChildren) % noOfChildren;
                } while (disabledTabIndexes.includes(reqIndex));
                break;
            case keyboardKeys.arrowDown:
            case keyboardKeys.arrowRight:
                event.preventDefault();
                do {
                    reqIndex = (reqIndex + 1) % noOfChildren;
                } while (disabledTabIndexes.includes(reqIndex));
                break;
            default:
                break;
        }
        (_a = activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.onExit) === null || _a === void 0 ? void 0 : _a.call(activeTabProps);
        if (activeIndex !== undefined) {
            onSelect === null || onSelect === void 0 ? void 0 : onSelect(reqIndex);
        }
        else {
            setActiveIdx(reqIndex);
        }
        (_d = (_b = filteredChildren[reqIndex]) === null || _b === void 0 ? void 0 : (_c = _b.props).onEnter) === null || _d === void 0 ? void 0 : _d.call(_c);
        (_f = (_e = tabRefs.current[reqIndex]) === null || _e === void 0 ? void 0 : _e.current) === null || _f === void 0 ? void 0 : _f.focus();
    };
    if (noOfChildren === 0) {
        return null;
    }
    return (_jsxs("div", Object.assign({ ref: ref, className: cn(tabsVariants(), className) }, props, { children: [_jsx("div", { className: cn(variant === "text" && "border-b-2 border-gray-200", "mb-4"), children: _jsx("nav", { role: "tablist", className: cn(tabsListVariants({ variant, color })), children: filteredChildren.map((tab, index) => {
                        const isActive = index === evalActiveIndex;
                        const btnId = tab.props.id ? `${tab.props.id}-btn` : `tab-${index}-btn`;
                        const ariaControls = tab.props.id || `tab-${index}`;
                        return (_jsxs("button", { type: "button", role: "tab", ref: tabRefs.current[index], disabled: tab.props.disabled, id: btnId, "aria-controls": ariaControls, "aria-selected": isActive, onClick: handleSelect(tab.props, index), onKeyDown: handleKeyDown, className: cn(tabsListItemVariants({ size, variant, color, active: isActive })), children: [tab.props.prefixIcon && (_jsx("span", { className: "mr-2", children: tab.props.prefixIcon })), tab.props.title, tab.props.suffixIcon && (_jsx("span", { className: "ml-2", children: tab.props.suffixIcon }))] }, index));
                    }) }) }), switchUsingCss
                ? filteredChildren.map((tab, index) => (_jsx("div", { id: tab.props.id || `tab-${index}`, role: "tabpanel", "aria-labelledby": tab.props.id ? `${tab.props.id}-btn` : `tab-${index}-btn`, tabIndex: 0, className: cn(tabsContentVariants(), index === evalActiveIndex
                        ? activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.className
                        : "hidden"), children: tab.props.children }, index)))
                : (_jsx("div", { id: (activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.id) || `tab-${evalActiveIndex}`, role: "tabpanel", "aria-labelledby": (activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.id)
                        ? `${activeTabProps.id}-btn`
                        : `tab-${evalActiveIndex}-btn`, tabIndex: 0, className: cn(tabsContentVariants(), activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.className), children: activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.children }))] })));
});
TabsComponent.displayName = "Tabs";
const Tabs = TabsComponent;
Tabs.Tab = Tab;
export { Tabs };
//# sourceMappingURL=tabs.js.map