"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const uikit_1 = require("@gravity-ui/uikit");
const cn_1 = require("../../utils/cn.js");
const b = (0, cn_1.editorCn)('tabs');
const Tabs = ({ className, items, defaultTab }) => {
    const [currentTab, setCurrentTab] = React.useState(defaultTab);
    const activeTab = React.useMemo(() => {
        if (currentTab) {
            const findTab = items.find(({ id }) => id === currentTab);
            if (findTab) {
                return findTab;
            }
        }
        return items[0] || null;
    }, [currentTab, items]);
    const handleClick = React.useCallback((tabItem) => () => {
        setCurrentTab(tabItem.id);
    }, []);
    const TabComponent = React.useMemo(() => {
        return activeTab?.component;
    }, [activeTab]);
    const isPaddingEnabled = React.useMemo(() => {
        return activeTab?.withPadding || false;
    }, [activeTab]);
    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [items.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: b('tabs-wrapper'), role: "tablist", children: items.map((item) => {
                    const isActive = item.id === activeTab.id;
                    return ((0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: "s", className: b('item', { active: isActive }), extraProps: {
                            role: 'tab',
                        }, onClick: handleClick(item), children: item.title }, item.title));
                }) })), (0, jsx_runtime_1.jsx)("div", { className: b('body'), children: TabComponent && ((0, jsx_runtime_1.jsx)(TabComponent, { className: b('item', { padding: isPaddingEnabled }) })) })] }));
};
exports.default = Tabs;
//# sourceMappingURL=Tabs.js.map
