import { __awaiter, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
import React from "react";
import { Box, Flex, Text, Drawer, DrawerBody, DrawerContent, DrawerHeader, DrawerOverlay, Icon, Image, useDisclosure, HStack, Stack, Spacer, Modal, ModalOverlay, ModalContent, ModalBody, } from "@chakra-ui/react";
import { useLocation, useParams } from "react-router-dom";
import { css } from "@emotion/react";
import { RuntimeContext } from "../../RuntimeContext";
import { ArrowBackIcon, HamburgerIcon } from "@chakra-ui/icons";
import useTemplate from "../../hooks/useTemplate";
import { useActionTrigger } from "../../hooks/useActionTrigger";
import { useSource } from "../../hooks/useSource";
import iconsList from "../../components/iconsList";
import { useComposer } from "../../Composer";
import { Delete, DotMore } from "@feedloop/icon";
import Tree, { mutateTree } from "@atlaskit/tree";
import { RenderItem } from "../SidebarLayout";
import Scrollbars from "rc-scrollbars";
import { getThemes } from "../../registeredThemes";
function usePromiseCallback(fn) {
    const [state, setState] = React.useState({ status: "idle" });
    const exec = React.useCallback((...args) => __awaiter(this, void 0, void 0, function* () {
        setState({ status: "firing", error: undefined });
        try {
            const resp = yield fn(...args);
            setState({ status: "fired" });
            return resp;
        }
        catch (error) {
            setState({ status: "fired", error });
            throw error;
        }
    }), [fn]);
    return Object.assign({ exec }, state);
}
export const PageHeadingsMap = {
    display: (props) => {
        var _a, _b, _c, _d, _e;
        const title = useTemplate(props.page.properties.values.title);
        const source = useSource();
        const stateLocation = useLocation().state;
        const runtimeActions = RuntimeContext.useActions();
        const appName = RuntimeContext.useSelectState((state) => state.name);
        const appDesc = RuntimeContext.useSelectState((state) => state.description);
        const appIcon = RuntimeContext.useSelectState((state) => state.icon);
        const params = useParams();
        const action = useActionTrigger((_a = props.page) === null || _a === void 0 ? void 0 : _a.properties.values.action, props.row, source);
        const { isOpen, onOpen, onClose } = useDisclosure();
        const isAction = ((_b = props.page) === null || _b === void 0 ? void 0 : _b.properties.values.headerStyle) === "default";
        const collapsible = RuntimeContext.useSelectState((state) => state.navbar.sidetop.collapsible);
        const navigations = RuntimeContext.useSelectState((state) => state.navbar.sidetop.content);
        const onExpand = React.useCallback((itemId) => {
            const newTree = mutateTree(navigations, itemId, { isExpanded: true });
            runtimeActions.swapSidetopNavContent(newTree);
        }, [runtimeActions, navigations]);
        const onCollapse = React.useCallback((itemId) => {
            const newTree = mutateTree(navigations, itemId, { isExpanded: false });
            runtimeActions.swapSidetopNavContent(newTree);
        }, [runtimeActions, navigations]);
        const composer = useComposer();
        const appTheme = RuntimeContext.useSelectState((state) => state.theme);
        const theme = (_c = getThemes().find((theme) => theme.id === appTheme.id)) === null || _c === void 0 ? void 0 : _c.theme;
        const renderThumb = React.useCallback((_a) => {
            var { style } = _a, props = __rest(_a, ["style"]);
            return (_jsx("div", Object.assign({ style: Object.assign(Object.assign({}, style), { backgroundColor: theme.colors.text["900"] }) }, props)));
        }, [theme]);
        return (_jsxs(_Fragment, { children: [_jsxs(Flex, Object.assign({ alignItems: "center", h: "57px", padding: "16px", borderBottom: "1px solid", borderColor: "bg.900", bg: "surface.900" }, { children: [(stateLocation === null || stateLocation === void 0 ? void 0 : stateLocation.allowBackNav) ? (_jsx(Box, { children: _jsx(ArrowBackIcon, { height: "57px", boxSize: 7, marginRight: "16px", onClick: props.onAbort, cursor: "pointer" }) })) : (_jsx(Box, Object.assign({ display: {
                                base: props.page.navbar.drawer.show ? "initial" : "none",
                                lg: collapsible ? "initial" : "none",
                            }, mr: "16px" }, { children: _jsx(HamburgerIcon, { height: "57px", boxSize: 7, onClick: onOpen, cursor: "pointer" }) }))), _jsx(Text, Object.assign({ fontWeight: "bold", fontSize: "lg", noOfLines: 1, pr: 4, color: "text.900" }, { children: title })), _jsx(Spacer, {}), isAction && ((_d = props.page) === null || _d === void 0 ? void 0 : _d.properties.values.icon) !== "none" && (_jsx(Box, Object.assign({ cursor: "pointer" }, { children: _jsx(Icon, { as: iconsList[(_e = props.page) === null || _e === void 0 ? void 0 : _e.properties.values.icon], boxSize: 7, onClick: action.handleClick }) })))] })), _jsxs(Drawer, Object.assign({ trapFocus: true, placement: "left", onClose: onClose, isOpen: isOpen }, { children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerContent, Object.assign({ p: 0, bg: "surface.800" }, { children: [_jsx(DrawerHeader, Object.assign({ borderBottom: "1px solid", borderColor: "bg.800" }, { children: _jsxs(Flex, Object.assign({ alignItems: "center", gap: "3", overflow: "hidden" }, { children: [_jsx(Image, { objectFit: "contain", height: "46px", alt: appName, src: appIcon, fallbackSrc: "/assets/placeholder.svg" }), _jsxs(Box, { children: [_jsx(Text, Object.assign({ fontWeight: "600", fontSize: "md", color: "brand.900", whiteSpace: "nowrap" }, { children: appName })), _jsx(Text, Object.assign({ fontSize: "xs", whiteSpace: "nowrap", color: "text.700" }, { children: appDesc }))] })] })) })), _jsx(DrawerBody, Object.assign({ m: 0, p: 0 }, { children: _jsx(Scrollbars, Object.assign({ renderThumbVertical: renderThumb, autoHide: true }, { children: _jsx(Box, Object.assign({ w: "100%", h: "100%", minH: "100%" }, { children: _jsx(Stack, Object.assign({ direction: "column", spacing: 0, display: navigations.items.root.children.length > 0
                                                    ? "initial"
                                                    : "none" }, { children: _jsx(Flex, Object.assign({ direction: "column", borderRadius: "md", py: navigations.items.root.children.length > 0 ? 4 : 0, px: "4", css: css `
                        > div {
                          display: flex;
                          flex-direction: column;
                          gap: 3px;
                        }
                      ` }, { children: _jsx(Tree, { tree: navigations, renderItem: (e) => (_jsx(RenderItem, { item: e.item, navigations: navigations, provided: e.provided, onCollapse: onCollapse, onExpand: onExpand, params: params, composer: composer })), offsetPerLevel: 26, isNestingEnabled: true }) })) })) })) })) }))] }))] }))] }));
    },
    form: (props) => {
        var _a, _b;
        const title = useTemplate(props.page.properties.values.title);
        const stateLocation = useLocation().state;
        const { isOpen, onOpen, onClose } = useDisclosure();
        const { exec, status } = usePromiseCallback(props.onDeleteRow);
        const menuRef = React.useRef(null);
        return (_jsxs(Flex, Object.assign({ alignItems: "center", h: "57px", padding: "16px", borderBottom: "1px solid", borderColor: "bg.900", bg: "surface.900" }, { children: [(stateLocation === null || stateLocation === void 0 ? void 0 : stateLocation.allowBackNav) && (_jsx(Box, { children: _jsx(ArrowBackIcon, { height: "57px", boxSize: 6, marginRight: "16px", onClick: props.onAbort }) })), _jsx(Box, Object.assign({ flex: 1 }, { children: _jsx(Text, Object.assign({ fontWeight: "bold", fontSize: "lg", noOfLines: 1, pr: 4, color: "text.900" }, { children: title })) })), props.page.id === "register" ||
                    props.row.id === "none" ||
                    !props.page.properties.deletableForm ? null : (_jsxs(Box, { children: [_jsx(Icon, { cursor: "pointer", height: "57px", boxSize: 7, as: DotMore, onClick: (e) => {
                                const rect = e.currentTarget.getClientRects();
                                menuRef.current = rect;
                                onOpen();
                            } }), _jsxs(Modal, Object.assign({ motionPreset: "slideInBottom", trapFocus: false, scrollBehavior: "inside", isOpen: isOpen, onClose: onClose }, { children: [_jsx(ModalOverlay, { display: { base: "initial", md: "none" } }), _jsx(ModalContent, Object.assign({ w: { base: "100%", md: "auto" }, position: "absolute", top: { base: "unset", md: ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a[0].top) - 16 }, left: { base: "unset", md: ((_b = menuRef.current) === null || _b === void 0 ? void 0 : _b[0].left) - 60 }, bottom: { base: 0, md: "unset" }, padding: 0, marginBottom: 0, borderTopRadius: { base: "20px", md: "5px" }, borderBottomRadius: { base: "0px", md: "5px" } }, { children: _jsx(ModalBody, Object.assign({ css: css `
                    &::-webkit-scrollbar {
                      display: none;
                    }
                  `, pb: { base: "20px" }, mt: { base: "10px", md: 0 } }, { children: _jsxs(HStack, Object.assign({ p: "10px", mx: "-20px", mb: "-10px", _hover: { backgroundColor: "gray.100" }, cursor: "pointer", onClick: exec }, { children: [_jsx(Icon, { cursor: "pointer", fontSize: "20px", color: "#DE220B", as: Delete }), _jsx(Text, Object.assign({ fontSize: "16px", color: "#DE220B" }, { children: status === "firing" ? "Deleting.." : "Delete" }))] })) })) }))] }))] }))] })));
    },
};
export default PageHeadingsMap;
//# sourceMappingURL=heading-maps.js.map