import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Tabs, TabList, Tab, TabPanels, TabPanel, Box, Spacer, } from "@chakra-ui/react";
import React from "react";
import Scrollbars from "rc-scrollbars";
import ComponentEditorPanel from "./ComponentEditorPanel";
import EditorContext from "@qorebase/app-runtime/src/EditorContext";
import PageGeneral from "./PageGeneral";
import PageOption from "./PageOption";
import { VariablesProvider } from "@qorebase/app-runtime/src/VariablesContext";
import { ParamsProvider } from "@qorebase/app-runtime/src/ParamsProvider";
const PropertiesPanel = () => {
    const rightPanel = EditorContext.useSelectState(({ rightPanel }) => rightPanel);
    const componentRef = React.useRef(null);
    return (_jsx(Box, Object.assign({ h: "full", borderLeft: "1px solid", borderColor: "gray.300", overflow: "hidden", position: "relative", bg: "white" }, { children: _jsxs(Tabs, Object.assign({ isLazy: true, h: "full", size: "sm" }, { children: [_jsx(TabList, Object.assign({ h: "10", top: 0, bg: "white" }, { children: _jsx(Tab, Object.assign({ fontWeight: "semibold" }, { children: "Properties" })) })), rightPanel.type === "page" ? (_jsx(VariablesProvider, Object.assign({ divElement: componentRef.current }, { children: _jsx(ParamsProvider, { children: _jsx(TabPanels, Object.assign({ h: "calc(100% - 40px)", ref: componentRef }, { children: _jsx(TabPanel, Object.assign({ p: 0, h: "full" }, { children: _jsxs(Scrollbars, { children: [_jsx(PageGeneral, {}), _jsx(PageOption, {}), _jsx(Spacer, { h: "72" })] }) })) })) }) }))) : (_jsx(VariablesProvider, Object.assign({ divElement: componentRef.current }, { children: _jsx(ParamsProvider, { children: _jsx(TabPanels, Object.assign({ h: "calc(100% - 40px)", ref: componentRef }, { children: _jsx(TabPanel, Object.assign({ p: 0, h: "full" }, { children: _jsxs(Scrollbars, { children: [_jsx(ComponentEditorPanel, {}), _jsx(Spacer, { h: "72" })] }) })) })) }) })))] })) })));
};
export default PropertiesPanel;
//# sourceMappingURL=PropertiesPanel.js.map