import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import React, { useMemo } from "react";
import { Box, Flex, Text, Icon, Stack, Center, useMediaQuery, Image, } from "@chakra-ui/react";
import { Link, useParams } from "react-router-dom";
import { RuntimeContext } from "../RuntimeContext";
import iconsList from "../components/iconsList";
import { useComposer } from "../Composer";
import Scrollbars from "rc-scrollbars";
import { getThemes } from "../registeredThemes";
import Tree, { mutateTree } from "@atlaskit/tree";
import { css } from "@emotion/react";
import { evaluateExpression } from "../utils/expressionParser";
import { useVariablesContext } from "../VariablesContext";
import EditorContext from "../EditorContext";
export const RenderItem = ({ item, navigations, provided, onCollapse, onExpand, params, composer, }) => {
    const isParent = React.useMemo(() => navigations.items[item.id].children.length > 0, [item, navigations]);
    const { values } = useVariablesContext();
    const variablesConfig = React.useMemo(() => Object.entries(values).map(([name, value]) => ({
        name,
        type: "any",
        evaluate: () => value,
    })), [values]);
    const shouldRender = useMemo(() => {
        const result = evaluateExpression(item.data.showWhen || "true", variablesConfig);
        return Boolean(result.type === "ok" && result.result);
    }, [item.data.showWhen]);
    if (!shouldRender) {
        return null;
    }
    return (_jsxs(Flex, Object.assign({ alignItems: "center", borderRadius: "md", py: "2", px: "2", color: params.page === item.data.page ? "brand.900" : "text.900", bgColor: params.page === item.data.page ? "brand.50" : undefined, _hover: {
            bgColor: params.page === item.data.page ? "brand.50" : "bg.800",
            color: params.page === item.data.page ? "brand.700" : undefined,
        }, transition: "background 200ms ease-out", fontWeight: params.page === item.data.page ? "600" : "400" }, provided.draggableProps, { children: [_jsx(Link, Object.assign({ to: (isParent && item.data.linked) || !isParent
                    ? `/page/${item.data.page}`
                    : "", onClick: () => composer.setExitDirection("none"), css: css `
          flex: 1;
        ` }, { children: _jsxs(Flex, Object.assign({ gap: "2", pl: "3", w: "full", cursor: "pointer", justifyContent: "left", alignItems: "center" }, { children: [item.data.icon && (_jsx(Icon, { color: "inherit", as: iconsList[item.data.icon], fontSize: "18px", transform: "translateY(-1px)" })), _jsx(Text, Object.assign({ color: "inherit" }, { children: item.data.label }))] })) })), _jsx(Center, { children: item.children && item.children.length > 0 && (_jsx(Icon, { boxSize: 5, color: "inherit", as: iconsList["ChevronDown"], onClick: () => item.isExpanded ? onCollapse(item.id) : onExpand(item.id), transition: "all 200ms ease-out", transform: `rotate(${item.isExpanded ? 0 : -90}deg)`, cursor: "pointer" })) })] })));
};
const SidebarLayout = ({ children, page, }) => {
    var _a;
    const appName = RuntimeContext.useSelectState((state) => state.name);
    const appDesc = RuntimeContext.useSelectState((state) => state.description);
    const appIcon = RuntimeContext.useSelectState((state) => state.icon);
    const runtimeActions = RuntimeContext.useActions();
    const params = useParams();
    const composer = useComposer();
    const appTheme = RuntimeContext.useSelectState((state) => state.theme);
    const theme = (_a = getThemes().find((theme) => theme.id === appTheme.id)) === null || _a === void 0 ? void 0 : _a.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]);
    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 [isShowSidebar] = useMediaQuery("(min-width: 48rem)", {
        fallback: true,
    });
    const screen = EditorContext.useSelectState((state) => state.screen);
    return (_jsxs(Box, Object.assign({ textColor: "text.900" }, { children: [isShowSidebar && page.navbar.sidetop.show && !collapsible && (_jsxs(Box, Object.assign({ overflowY: "hidden", position: "absolute", height: "100%", maxWidth: { md: "30%", lg: "250px" }, top: "0", left: "0", right: "0", bg: "surface.800", borderRight: "1px solid", borderColor: "bg.900" }, { children: [_jsx(Center, Object.assign({ bg: "surface.800", px: "3", pt: "4", pb: "2", height: "10%", borderBottom: "1px solid", borderColor: "#f5f5f5" }, { children: _jsxs(Flex, Object.assign({ alignItems: "center", gap: "3", overflow: "hidden", width: "full" }, { children: [_jsx(Image, { objectFit: "contain", height: "46px", minW: "56px", 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.800" }, { children: appDesc }))] })] })) })), _jsx(Box, Object.assign({ w: "100%", height: "90%" }, { children: _jsx(Scrollbars, Object.assign({ renderThumbVertical: renderThumb, autoHide: true }, { 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 ? 2 : 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 }) })) })) })) }))] }))), _jsx(Box, Object.assign({ position: "absolute", left: {
                    base: 0,
                    md: !page.navbar.sidetop.show || collapsible || screen !== "large"
                        ? 0
                        : "30%",
                    lg: !page.navbar.sidetop.show || collapsible ? 0 : "250px",
                }, right: "0", top: "0", bottom: "0", overflow: "hidden" }, { children: children }))] })));
};
export default SidebarLayout;
//# sourceMappingURL=SidebarLayout.js.map