import { __awaiter } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import React from "react";
import { Box, Button, Center, Flex, HStack, Icon, Image, Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay, Popover, PopoverContent, PopoverTrigger, Portal, Spacer, Text, useDisclosure, useOutsideClick, VStack, } from "@chakra-ui/react";
import { useRouter } from "next/router";
import qoreStorageClient from "../../hooks/qoreStorageClient";
import { css } from "@emotion/react";
import ThemePicker from "./ThemePicker";
import IntegrationSetting from "./IntegrationSetting";
import DomainSetting from "./DomainSetting";
import ExternalDataSource from "./ExternalDataSource";
import { GitBranch, ChevronRight, Collection, ColorFill, Data, Delete, Link, Cog, Warning, } from "@feedloop/icon";
import EditorContext from "@qorebase/app-runtime/src/EditorContext";
import PortalApps from "./PortalApps";
import { ChevronLeftIcon } from "@chakra-ui/icons";
import GeneralSetting from "./GeneralSetting";
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- props type definition
export default function SettingPanel(props) {
    const router = useRouter();
    const revisionID = EditorContext.useSelectState((state) => state.revisionID);
    const { isOpen, onOpen, onClose } = useDisclosure();
    const editorActions = EditorContext.useActions();
    const ref = React.useRef();
    const [activeCategory, setActiveCategory] = React.useState("");
    useOutsideClick({
        ref: ref,
        handler: () => {
            setActiveCategory(undefined);
        },
    });
    const deleteApp = qoreStorageClient.table("applications").useDeleteRow();
    const deleteRevision = qoreStorageClient.table("revisions").useDeleteRow();
    const deleteDomain = qoreStorageClient.table("domains").useDeleteRow();
    const appDomains = qoreStorageClient.table("domains").useListRow({
        condition: {
            $and: [
                {
                    appdomain: {
                        $eq: router.query.projectID,
                    },
                },
            ],
        },
    });
    const handleDeleteRow = React.useCallback(() => {
        return Promise.all([
            deleteApp.deleteRow(router.query.appID),
            deleteRevision.deleteRow(revisionID),
            ...appDomains.data.map((domain) => deleteDomain.deleteRow(domain.id)),
        ]);
    }, [
        deleteApp,
        deleteRevision,
        deleteDomain,
        revisionID,
        router.query.appID,
        appDomains,
    ]);
    return (_jsxs(Box, Object.assign({ bg: "white", h: "full", borderRight: "1px solid", borderColor: "gray.300" }, { children: [_jsx(Button, Object.assign({ p: "2", variant: "link", leftIcon: _jsx(ChevronLeftIcon, { transform: "scale(1.7)" }), onClick: () => {
                    editorActions.setRightPanel({ type: "page" });
                } }, { children: "Back" })), _jsxs(Popover, Object.assign({ placement: "auto-end", isLazy: true }, { children: [_jsx(PopoverTrigger, { children: _jsxs(Flex, Object.assign({ p: 2, cursor: "pointer", onClick: () => {
                                setActiveCategory("Application Info");
                            }, bg: activeCategory === "Application Info" ? "#E6F0FF" : undefined, css: css `
              border-radius: 8px;
              &:hover {
                background-color: #e6f0ff;
                border-radius: 4px;
              }
            ` }, { children: [_jsx(Center, Object.assign({ p: "6px", bg: "white", css: css `
                border-radius: 4px;
              ` }, { children: _jsx(Icon, { fontSize: "lg", as: Cog }) })), _jsx(Center, Object.assign({ pl: 2 }, { children: _jsx(Text, { children: "General" }) })), _jsx(Spacer, {}), _jsx(Center, { children: _jsx(Icon, { fontSize: "lg", as: ChevronRight }) })] })) }), _jsx(Portal, { children: _jsx(PopoverContent, Object.assign({ css: css `
              border-radius: 0px;
            `, mt: "58px", ml: "8px", overflow: "hidden" }, { children: _jsx(Box, Object.assign({ h: "896", p: "16px" }, { children: _jsx(GeneralSetting, {}) })) })) })] })), _jsxs(Popover, Object.assign({ placement: "right", isLazy: true }, { children: [_jsx(PopoverTrigger, { children: _jsxs(Flex, Object.assign({ my: 1, p: 2, cursor: "pointer", onClick: () => {
                                setActiveCategory("Style apps");
                            }, bg: activeCategory === "Style apps" ? "#E6F0FF" : undefined, css: css `
              border-radius: 8px;
              &:hover {
                background-color: #e6f0ff;
                border-radius: 4px;
              }
            ` }, { children: [_jsx(Center, Object.assign({ p: "6px", bg: "white", css: css `
                border-radius: 4px;
              ` }, { children: _jsx(Icon, { fontSize: "lg", as: ColorFill }) })), _jsx(Center, Object.assign({ pl: 2 }, { children: _jsx(Text, { children: "Appearance" }) })), _jsx(Spacer, {}), _jsx(Center, { children: _jsx(Icon, { fontSize: "lg", as: ChevronRight }) })] })) }), _jsx(Portal, { children: _jsx(PopoverContent, Object.assign({ css: css `
              border-radius: 0px;
            `, mt: "63px", ml: "8px", overflow: "hidden" }, { children: _jsx(Box, Object.assign({ h: "896", p: "16px" }, { children: _jsx(ThemePicker, {}) })) })) })] })), _jsxs(Popover, Object.assign({ placement: "right", isLazy: true }, { children: [_jsx(PopoverTrigger, { children: _jsxs(Flex, Object.assign({ my: 1, p: 2, cursor: "pointer", onClick: () => {
                                setActiveCategory("Integration");
                            }, bg: activeCategory === "Integration" ? "#E6F0FF" : undefined, css: css `
              border-radius: 8px;
              &:hover {
                background-color: #e6f0ff;
                border-radius: 4px;
              }
            ` }, { children: [_jsx(Center, Object.assign({ p: "6px", bg: "white", css: css `
                border-radius: 4px;
              ` }, { children: _jsx(Icon, { fontSize: "lg", as: GitBranch }) })), _jsx(Center, Object.assign({ pl: 2 }, { children: _jsx(Text, { children: "Integration" }) })), _jsx(Spacer, {}), _jsx(Center, { children: _jsx(Icon, { fontSize: "lg", as: ChevronRight }) })] })) }), _jsx(Portal, { children: _jsx(PopoverContent, Object.assign({ css: css `
              border-radius: 0px;
            `, mt: "63px", ml: "8px", overflow: "hidden" }, { children: _jsx(Box, Object.assign({ h: "896", p: "16px" }, { children: _jsx(IntegrationSetting, {}) })) })) })] })), _jsxs(Popover, Object.assign({ placement: "right", isLazy: true }, { children: [_jsx(PopoverTrigger, { children: _jsxs(Flex, Object.assign({ my: 1, p: 2, cursor: "pointer", onClick: () => {
                                setActiveCategory("Domain");
                            }, bg: activeCategory === "Domain" ? "#E6F0FF" : undefined, css: css `
              border-radius: 8px;
              &:hover {
                background-color: #e6f0ff;
                border-radius: 4px;
              }
            ` }, { children: [_jsx(Center, Object.assign({ p: "6px", bg: "white", css: css `
                border-radius: 4px;
              ` }, { children: _jsx(Icon, { fontSize: "lg", as: Link }) })), _jsx(Center, Object.assign({ pl: 2 }, { children: _jsx(Text, { children: "Domain" }) })), _jsx(Spacer, {}), _jsx(Center, { children: _jsx(Icon, { fontSize: "lg", as: ChevronRight }) })] })) }), _jsx(Portal, { children: _jsx(PopoverContent, Object.assign({ css: css `
              border-radius: 0px;
            `, mt: "63px", ml: "8px", overflow: "hidden" }, { children: _jsx(Box, Object.assign({ h: "896", p: "16px" }, { children: _jsx(DomainSetting, {}) })) })) })] })), _jsxs(Popover, Object.assign({ placement: "right", isLazy: true }, { children: [_jsx(PopoverTrigger, { children: _jsxs(Flex, Object.assign({ my: 1, p: 2, cursor: "pointer", onClick: () => {
                                setActiveCategory("External Data");
                            }, bg: activeCategory === "External Data" ? "#E6F0FF" : undefined, css: css `
              border-radius: 8px;
              &:hover {
                background-color: #e6f0ff;
                border-radius: 4px;
              }
            ` }, { children: [_jsx(Center, Object.assign({ p: "6px", bg: "white", css: css `
                border-radius: 4px;
              ` }, { children: _jsx(Icon, { fontSize: "lg", as: Data }) })), _jsx(Center, Object.assign({ pl: 2 }, { children: _jsx(Text, { children: "External Data" }) })), _jsx(Spacer, {}), _jsx(Center, { children: _jsx(Icon, { fontSize: "lg", as: ChevronRight }) })] })) }), _jsx(Portal, { children: _jsx(PopoverContent, Object.assign({ css: css `
              border-radius: 0px;
            `, mt: "63px", ml: "8px", overflow: "hidden" }, { children: _jsx(Box, Object.assign({ h: "896", p: "16px" }, { children: _jsx(ExternalDataSource, {}) })) })) })] })), _jsxs(Popover, Object.assign({ placement: "right", isLazy: true }, { children: [_jsx(PopoverTrigger, { children: _jsxs(Flex, Object.assign({ my: 1, p: 2, cursor: "pointer", onClick: () => {
                                setActiveCategory("Portal Apps");
                            }, bg: activeCategory === "Portal Apps" ? "#E6F0FF" : undefined, css: css `
              border-radius: 8px;
              &:hover {
                background-color: #e6f0ff;
                border-radius: 4px;
              }
            ` }, { children: [_jsx(Center, Object.assign({ p: "6px", bg: "white", css: css `
                border-radius: 4px;
              ` }, { children: _jsx(Icon, { fontSize: "lg", as: Collection }) })), _jsx(Center, Object.assign({ pl: 2 }, { children: _jsx(Text, { children: "Permission" }) })), _jsx(Spacer, {}), _jsx(Center, { children: _jsx(Icon, { fontSize: "lg", as: ChevronRight }) })] })) }), _jsx(Portal, { children: _jsx(PopoverContent, Object.assign({ css: css `
              border-radius: 0px;
            `, mt: "63px", ml: "8px", overflow: "hidden" }, { children: _jsx(Box, Object.assign({ h: "896", p: "16px" }, { children: _jsx(PortalApps, {}) })) })) })] })), _jsxs(Popover, Object.assign({ placement: "right", isLazy: true }, { children: [_jsx(PopoverTrigger, { children: _jsxs(Flex, Object.assign({ my: 1, p: 2, cursor: "pointer", onClick: () => {
                                setActiveCategory("Delete");
                            }, bg: activeCategory === "Delete" ? "#E6F0FF" : undefined, css: css `
              border-radius: 8px;
              &:hover {
                background-color: #e6f0ff;
                border-radius: 4px;
              }
            ` }, { children: [_jsx(Center, Object.assign({ p: "6px", bg: "white", css: css `
                border-radius: 4px;
              ` }, { children: _jsx(Icon, { fontSize: "lg", as: Warning, color: "red.400" }) })), _jsx(Center, Object.assign({ pl: 2 }, { children: _jsx(Text, { children: "Danger Zone" }) })), _jsx(Spacer, {}), _jsx(Center, { children: _jsx(Icon, { fontSize: "lg", as: ChevronRight }) })] })) }), _jsx(Portal, { children: _jsx(PopoverContent, Object.assign({ css: css `
              border-radius: 0px;
            `, mt: "63px", ml: "8px", overflow: "hidden" }, { children: _jsx(Box, Object.assign({ h: "896", p: "16px" }, { children: _jsxs(VStack, Object.assign({ spacing: 4, width: "full" }, { children: [_jsx(Text, Object.assign({ w: "full", align: "left", fontSize: "md", fontWeight: "600", mb: "10px" }, { children: "Are you sure deleting your apps?" })), _jsx(Text, Object.assign({ mb: "16px", w: "full", align: "left", fontWeight: "600" }, { children: "Here you go. We are intentionally hidden this delete action. So, you are sure you want to do it." })), _jsx(Button, Object.assign({ w: "full", mt: "24px", colorScheme: "red", variant: "solid", onClick: onOpen, leftIcon: _jsx(Icon, { fontSize: "lg", as: Delete, color: "white" }) }, { children: "Delete this app now!" }))] })) })) })) })] })), _jsxs(Modal, Object.assign({ isOpen: isOpen, onClose: onClose, isCentered: true }, { children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { children: [_jsx(ModalHeader, Object.assign({ mt: "16px" }, { children: _jsxs(VStack, { children: [_jsx(Image, { src: "/assets/ilustration/delete.svg", alt: "Desktop" }), _jsx("br", {}), _jsx(Text, Object.assign({ fontSize: "lg", fontWeight: "600", lineHeight: "16px" }, { children: "Deleting this app?" }))] }) })), _jsxs(ModalBody, { children: [_jsx(Text, Object.assign({ align: "center" }, { children: "This action delete cannot be undone. Please, make sure once again. Do you really need delete this app?" })), _jsxs(HStack, Object.assign({ mt: "32px", mb: "10px" }, { children: [_jsx(Button, Object.assign({ w: "49%", variant: "outline", onClick: onClose }, { children: "Cancel" })), _jsx(Button, Object.assign({ w: "49%", bgColor: "#DE220B", color: "white", onClick: () => __awaiter(this, void 0, void 0, function* () {
                                                    yield handleDeleteRow();
                                                    router.push("/apps/project/[projectID]", `/apps/project/${router.query.projectID}`);
                                                }) }, { children: "Delete, anyway" }))] }))] })] })] }))] })));
}
//# sourceMappingURL=SettingPanel.js.map