import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
import React from "react";
import { Box, Flex, Text, Container, MenuButton, IconButton, MenuList, MenuItem, Menu, Stack, HStack, Portal, Show, useBreakpointValue, Popover, PopoverBody, PopoverContent, PopoverTrigger, useDisclosure, Center, Icon, } from "@chakra-ui/react";
import { Link, useParams } from "react-router-dom";
import { RuntimeContext } from "../RuntimeContext";
import { HamburgerIcon } from "@chakra-ui/icons";
import { useNavigations } from "../hooks/navigations";
import EditorContext from "../EditorContext";
import { ChevronDown, ChevronRight } from "@feedloop/icon";
import iconsList from "../components/iconsList";
import _ from "lodash";
import { useComposer } from "../Composer";
const buttonStyle = {
    color: "gray.900",
    variant: "ghost",
    bgColor: "white",
    size: "xs",
    _hover: {
        color: "gray.900",
        bgColor: "gray.100",
    },
    _active: {
        color: "gray.900",
        bgColor: "gray.100",
    },
};
const SubmenuLabel = ({ params, item }) => {
    return (_jsxs(Center, Object.assign({ gap: "2", w: "full", as: Link, to: item.linked ? `/page/${item.page}` : "", cursor: "pointer", justifyContent: "left" }, { children: [_jsx(Icon, { color: params.page === item.page ? "brand.900" : "text.900", as: iconsList[item.icon] }), _jsx(Text, Object.assign({ fontSize: "reg", color: params.page === item.page ? "brand.900" : "text.900" }, { children: item.label }))] })));
};
const Submenu = ({ ref, params, item }) => {
    const { isOpen, onToggle, onClose } = useDisclosure();
    return (_jsx(_Fragment, { children: _jsxs(HStack, Object.assign({ spacing: 2 }, { children: [_jsxs(Popover, Object.assign({ initialFocusRef: ref, isOpen: isOpen, onClose: onClose, placement: "bottom", isLazy: true }, { children: [_jsx(PopoverTrigger, { children: _jsx(Text, Object.assign({ cursor: "pointer", as: Link, to: item.linked ? `/page/${item.page}` : "", color: params.page === item.page ? "brand.900" : "text.900", fontSize: "reg", fontWeight: "normal" }, { children: item.label })) }), _jsx(PopoverContent, Object.assign({ maxW: "200px" }, { children: _jsx(PopoverBody, { children: item.children.map((child) => (_jsxs(Flex, Object.assign({ justifyContent: "space-between", alignItems: "center", py: "2" }, { children: [_jsx(SubmenuLabel, { item: child, params: params }), _jsx(Center, { children: child.children && child.children.length > 0 && (_jsxs(Menu, Object.assign({ autoSelect: false, placement: "right-start", isLazy: true }, { children: [_jsx(MenuButton, Object.assign({ icon: _jsx(ChevronRight, { fontSize: "14px" }), as: IconButton, "aria-label": "Submenuchild" }, buttonStyle)), _jsx(MenuList, { children: child.children.map((e) => (_jsx(MenuItem, { children: _jsx(SubmenuLabel, { item: e, params: params }) }, e.id))) })] }))) })] }), child.id))) }) }))] })), item.children.length > 0 && (_jsx(IconButton, Object.assign({ icon: _jsx(ChevronDown, { fontSize: "14px" }), "aria-label": "Submenu", onClick: onToggle, isActive: isOpen }, buttonStyle)))] }), item.id) }));
};
const TopbarLayout = ({ children, page, }) => {
    const appName = RuntimeContext.useSelectState((state) => state.name);
    const params = useParams();
    const isSm = useBreakpointValue([true, false, false, false]);
    const screen = EditorContext.useSelectState((state) => state.screen);
    const composer = useComposer();
    const navigations = useNavigations();
    const navs = RuntimeContext.useSelectState((state) => state.navbar.sidetop.content.items);
    const navMap = React.useMemo(() => {
        const arrNav = Object.entries(navs)
            .map(([key, val]) => ({
            id: key,
            children: val.children,
            label: val.data.label,
            icon: val.data.icon,
            page: val.data.page,
            linked: val.data.linked,
        }))
            .filter((e) => e.id !== "root");
        const layer1 = arrNav.filter((nav) => navs.root.children.includes(nav.id));
        const layer2 = arrNav.filter((nav) => !layer1.some((e) => e.id === nav.id));
        layer2.forEach((nav) => {
            nav.children.forEach((e, idxChild) => {
                const index = layer2.findIndex((f) => f.id === e);
                layer2.splice(index, 1);
                const newChild = [...nav.children];
                newChild.splice(idxChild, 1, arrNav.find((f) => f.id === e));
                nav.children = newChild;
            });
        });
        layer1.forEach((nav) => {
            nav.children.forEach((e, idxChild) => {
                const newChild = [...nav.children];
                newChild.splice(idxChild, 1, arrNav.find((f) => f.id === e));
                nav.children = newChild;
            });
        });
        return _.sortBy(layer1, (item) => navs.root.children.indexOf(item.id));
    }, [navs]);
    const dropdownRef = React.useRef();
    return (_jsxs(Box, { children: [_jsx(Box, Object.assign({ bgColor: "surface.900", shadow: "base", zIndex: "1", position: "sticky", top: 0 }, { children: _jsxs(Container, Object.assign({ maxW: "container.lg" }, { children: [_jsxs(Flex, Object.assign({ height: 16, alignItems: "center", justifyContent: "space-between" }, { children: [_jsx(Text, Object.assign({ fontWeight: "bold", fontSize: "md" }, { children: appName })), _jsx(Show, Object.assign({ above: "md" }, { children: _jsx(Box, Object.assign({ hidden: !page.navbar.sidetop.show }, { children: _jsx(Stack, Object.assign({ spacing: 8, align: "center", justify: ["center", "space-between", "flex-end", "flex-end"], direction: ["column", "row", "row", "row"], pt: [4, 4, 0, 0] }, { children: screen !== "small" &&
                                                navMap.map((nav) => (_jsx(Submenu, { ref: dropdownRef, item: nav, params: params }, nav.id))) })) })) })), isSm || screen === "small" || navigations.menus.length > 0 ? (_jsx(Box, { children: _jsxs(Menu, Object.assign({ autoSelect: false, isLazy: true }, { children: [_jsx(MenuButton, { as: IconButton, "aria-label": "Options", icon: _jsx(HamburgerIcon, {}), variant: "outline", hidden: navigations.menus.length < 1 }), _jsx(Portal, Object.assign({ containerRef: dropdownRef }, { children: _jsx(MenuList, { children: navigations.menus.map((menu) => (_jsx(Link, Object.assign({ to: `/page/${menu.id}`, onClick: () => composer.setExitDirection("none") }, { children: _jsx(MenuItem, { children: _jsx(Text, Object.assign({ color: params.page === menu.id
                                                                    ? "brand.900"
                                                                    : "text.900" }, { children: menu.title })) }) }), menu.id))) }) }))] })) })) : null] })), _jsx(Box, { ref: dropdownRef })] })) })), _jsx(Box, Object.assign({ position: "absolute", left: "50%", right: 0, top: 16, bottom: 0, transform: "translate(-50%)", w: "full", h: "full", overflow: "hidden" }, { children: children }))] }));
};
export default TopbarLayout;
//# sourceMappingURL=TopbarLayout.js.map