import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useEffect, useState } from 'react';
import { css } from '@emotion/react';
import { createComponent } from '@meta-ui/core';
import { Tabs as BaseTabs, TabList, Tab, TabPanels, TabPanel } from '@chakra-ui/react';
import { Type } from '@sinclair/typebox';
import { getSlots } from '../_internal/Slot';
const Tabs = ({ tabNames, mergeState, initialSelectedTabIndex, slotsMap, customStyle, }) => {
    const [selectedTabIndex, setSelectedTabIndex] = useState(initialSelectedTabIndex !== null && initialSelectedTabIndex !== void 0 ? initialSelectedTabIndex : 0);
    useEffect(() => {
        mergeState({ selectedTabIndex });
    }, [selectedTabIndex]);
    return (_jsxs(BaseTabs, Object.assign({ defaultIndex: initialSelectedTabIndex, onChange: idx => setSelectedTabIndex(idx) }, { children: [_jsx(TabList, { children: tabNames.map((name, idx) => (_jsx(Tab, Object.assign({ css: css `${customStyle === null || customStyle === void 0 ? void 0 : customStyle.tabItem}}` }, { children: name }), idx))) }, void 0), _jsx(TabPanels, { children: getSlots(slotsMap, 'content').map((content, idx) => {
                    return (_jsx(TabPanel, Object.assign({ css: css `
                ${customStyle === null || customStyle === void 0 ? void 0 : customStyle.tabContent}
              ` }, { children: content }), idx));
                }) }, void 0)] }), void 0));
};
const StateSchema = Type.Object({
    selectedTabIndex: Type.Number(),
});
const PropsSchema = Type.Object({
    tabNames: Type.Array(Type.String()),
    initialSelectedTabIndex: Type.Optional(Type.Number()),
});
export default Object.assign(Object.assign({}, createComponent({
    version: 'chakra_ui/v1',
    metadata: {
        name: 'tabs',
        displayName: 'Tabs',
        description: 'chakra-ui tabs',
        isDraggable: true,
        isResizable: true,
        exampleProperties: {
            tabNames: [],
            initialSelectedTabIndex: 0,
        },
        exampleSize: [6, 6],
    },
    spec: {
        properties: PropsSchema,
        state: StateSchema,
        methods: [],
        slots: ['content'],
        styleSlots: ['tabItem', 'tabContent'],
        events: [],
    },
})), { impl: Tabs });
//# sourceMappingURL=Tabs.js.map