import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import TextBase from "../text";
import { Row } from "../grid";
import { ItemWrapper } from "./styled";
import { currentTheme } from "../../theme";
function Tabs({ items, onChange, selectedValue, type = "simple", 
// @ts-ignore
theme = currentTheme, defaultNonActive, className, }) {
    const [selectedItemId, setSelectedItemId] = React.useState(defaultNonActive
        ? -1
        : selectedValue
            ? items.findIndex((item) => item.value === selectedValue)
            : 0);
    React.useEffect(() => {
        const selected = items.findIndex((item) => item.value === selectedValue);
        if (selected > -1) {
            setSelectedItemId(selected);
        }
    }, [selectedValue]);
    const TabText = type === "cards" ? TextBase.T2 : TextBase.F2;
    return (_jsx(Row, { className: `ui-tabs ${className}`, noWrap: true, children: items.map((item, id) => {
            const isActive = id === selectedItemId;
            const isNext = id === selectedItemId + 1;
            const isLast = id === items.length - 1;
            const zIndex = isActive
                ? items.length
                : id < selectedItemId
                    ? id + 1
                    : items.length - 1 - (id - selectedItemId - 1);
            return (_jsx(ItemWrapper, { type: type, isActive: isActive, isLast: isLast, isNext: isNext, zIndex: zIndex, disabled: item.disabled, onClick: () => {
                    if (!item.disabled) {
                        setSelectedItemId(id);
                        onChange(items[id].value);
                    }
                }, className: `ui-tabs__item-wrapper ${isActive ? "active" : ""}`, tabsTheme: theme, children: _jsx(TabText, { as: "div", className: "ui-tabs__item", children: item.label }) }, id));
        }) }));
}
export default Tabs;
//# sourceMappingURL=index.js.map