import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import Tabs from "../components/Tabs/Tabs.js";
import BlockConfigForm from "../containers/BlockConfigForm/BlockConfigForm.js";
import BlocksList from "../containers/BlocksList/BlocksList.js";
import GlobalConfig from "../containers/GlobalConfig/GlobalConfig.js";
import SourceCode from "../containers/SourceCode/SourceCode.js";
import Tree from "../containers/Tree/index.js";
export const useEditorTabs = ({ leftTabs, rightTabs, }) => {
    const tabs = React.useMemo(() => ({
        left: [
            {
                id: 'page',
                title: 'PAGE',
                component: () => (_jsx(Tabs, { items: [
                        {
                            id: 'blocks-list',
                            title: 'BLOCKS',
                            component: BlocksList,
                            withPadding: true,
                        },
                        {
                            id: 'layers',
                            title: 'LAYERS',
                            component: Tree,
                            withPadding: true,
                        },
                        {
                            id: 'source-code',
                            title: 'RAW',
                            component: ({ className }) => (_jsx(SourceCode, { className: className })),
                            withPadding: true,
                        },
                    ] })),
            },
            {
                id: 'global',
                title: 'GLOBAL',
                component: GlobalConfig,
            },
            ...(leftTabs || []),
        ],
        right: [
            {
                id: 'edit',
                title: 'EDIT',
                component: () => (_jsx(Tabs, { items: [
                        {
                            id: 'block-config',
                            title: 'INPUTS',
                            component: BlockConfigForm,
                        },
                        {
                            id: 'source-code',
                            title: 'RAW',
                            component: ({ className }) => (_jsx(SourceCode, { className: className, showSelectedBlockOnly: true })),
                            withPadding: true,
                        },
                    ] })),
            },
            ...(rightTabs || []),
        ],
    }), [leftTabs, rightTabs]);
    return tabs;
};
//# sourceMappingURL=useEditorTabs.js.map
