import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { ArrowBackIcon } from "@chakra-ui/icons";
import { Box, Container, Heading, HStack, Tab, TabList, TabPanel, TabPanels, Tabs, VStack, } from "@chakra-ui/react";
import Scrollbars from "rc-scrollbars";
import EditorContext from "@qorebase/app-runtime/src/EditorContext";
import DangerZone from "./setting/DangerZone";
import DomainSetting from "./setting/DomainSetting";
import ExternalDataSource from "./setting/ExternalDataSource";
import GeneralSetting from "./setting/GeneralSetting";
import IntegrationSetting from "./setting/IntegrationSetting";
import PortalApps from "./setting/PortalApps";
import React from "react";
import ComponentsSettings from "./ComponentsSettings";
const SettingPage = () => {
    const editorActions = EditorContext.useActions();
    const hasProduction = EditorContext.useSelectState((state) => state.hasProduction);
    const [tabIndex, setTabIndex] = React.useState(0);
    const tabStyle = {
        justifyContent: "start",
        gap: "2",
        fontSize: "sm",
        _selected: {
            fontWeight: "600",
            bgColor: tabIndex === 5 ? "red.100" : "#E6F0FF",
            borderRadius: "4px",
            color: tabIndex === 5 ? "red.500" : "#0065FF",
        },
    };
    return (_jsx(Scrollbars, Object.assign({ autoHide: true }, { children: _jsx(Box, Object.assign({ flex: 1, alignItems: "normal", height: "full", overflow: "auto", padding: "32px", borderRadius: "4px", boxShadow: "0 0 0 16px #F6F6F6 inset", bgColor: "white" }, { children: _jsx(Container, Object.assign({ maxW: "container.xl", pt: 12 }, { children: _jsxs(VStack, Object.assign({ alignItems: "normal" }, { children: [_jsxs(HStack, Object.assign({ h: "14", alignItems: "center", borderBottom: "1px solid", borderColor: "gray.300" }, { children: [_jsx(ArrowBackIcon, { fontSize: "lg", cursor: "pointer", onClick: () => editorActions.setWindow("preview") }), _jsx(Heading, Object.assign({ size: "md" }, { children: "App Settings" }))] })), _jsxs(Tabs, Object.assign({ orientation: "vertical", variant: "unstyled", defaultIndex: 0, pt: 5, gap: 3, onChange: (index) => setTabIndex(index) }, { children: [_jsxs(TabList, Object.assign({ w: "sm", gap: "2" }, { children: [_jsx(Tab, Object.assign({}, tabStyle, { children: "General" })), _jsx(Tab, Object.assign({}, tabStyle, { children: "Components" })), _jsx(Tab, Object.assign({}, tabStyle, { children: "Domains" })), _jsx(Tab, Object.assign({}, tabStyle, { children: "Integration" })), _jsx(Tab, Object.assign({}, tabStyle, { children: "External Data Source" })), _jsx(Tab, Object.assign({}, tabStyle, { children: "Apps Portal" })), _jsx(Tab, Object.assign({}, tabStyle, { color: "red.500", hidden: hasProduction }, { children: "Danger Zone" }))] })), _jsxs(TabPanels, { children: [_jsx(TabPanel, Object.assign({ py: 0 }, { children: _jsx(GeneralSetting, {}) })), _jsx(TabPanel, { children: _jsx(ComponentsSettings, {}) }), _jsx(TabPanel, { children: _jsx(DomainSetting, {}) }), _jsx(TabPanel, { children: _jsx(IntegrationSetting, {}) }), _jsx(TabPanel, { children: _jsx(ExternalDataSource, {}) }), _jsx(TabPanel, { children: _jsx(PortalApps, {}) }), _jsx(TabPanel, Object.assign({ hidden: hasProduction }, { children: _jsx(DangerZone, {}) }))] })] }))] })) })) })) })));
};
export default SettingPage;
//# sourceMappingURL=SettingPage.js.map