import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Button } from '@gravity-ui/uikit';
import { editorCn } from "../../utils/cn.js";
import './Tabs.css';
const b = 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 (_jsxs("div", { className: b(null, className), children: [items.length > 1 && (_jsx("div", { className: b('tabs-wrapper'), role: "tablist", children: items.map((item) => {
                    const isActive = item.id === activeTab.id;
                    return (_jsx(Button, { view: "flat", size: "s", className: b('item', { active: isActive }), extraProps: {
                            role: 'tab',
                        }, onClick: handleClick(item), children: item.title }, item.title));
                }) })), _jsx("div", { className: b('body'), children: TabComponent && (_jsx(TabComponent, { className: b('item', { padding: isPaddingEnabled }) })) })] }));
};
export default Tabs;
//# sourceMappingURL=Tabs.js.map
