import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import React from "react";
import { Flex, IconButton, Box, Text, Stack, Button, Center, Icon, Input, InputGroup, InputLeftElement, Menu, MenuButton, MenuList, Portal, SimpleGrid, Spacer, Tab, TabList, TabPanel, TabPanels, Tabs, useDisclosure, Grid, GridItem, Switch, } from "@chakra-ui/react";
import { ArrowLeftAlt } from "@feedloop/icon";
import EditorContext from "@qorebase/app-runtime/src/EditorContext";
import { RuntimeContext } from "@qorebase/app-runtime/src/RuntimeContext";
import Scrollbars from "rc-scrollbars";
import PropsGroup from "./PropsGroup";
import StringPropertyEditor from "./property/string";
import iconsList from "@qorebase/app-runtime/src/components/iconsList";
import { humanize } from "@qorebase/app-runtime/src/utils/humanizeString";
import format from "@qorebase/app-runtime/src/utils/format";
import FormulaEditor from "./FormulaEditor";
const NavbarContent = () => {
    const editorActions = EditorContext.useActions();
    const runtimeActions = RuntimeContext.useActions();
    const { type, contentId } = EditorContext.useSelectState((state) => state.navbarPanel);
    const content = RuntimeContext.useSelectState((state) => type === "bottom"
        ? state.navbar.bottom.content[contentId]
        : state.navbar.sidetop.content.items[contentId].data);
    const iconDisclosure = useDisclosure();
    const [iconInputSearch, setIconInputSearch] = React.useState("");
    const pagesMap = RuntimeContext.useSelectState((state) => state.maps.page);
    const pages = React.useMemo(() => Iterator.from(Object.values(pagesMap))
        .filter((page) => page.type !== "system")
        .map((filterPage) => ({
        value: filterPage.id,
        label: format(filterPage.title, {}),
    }))
        .toArray(), [pagesMap]);
    const handleChange = React.useCallback((key, value, type) => {
        if (type === "bottom") {
            runtimeActions.setBottomNavContent(contentId, key, value);
        }
        else {
            runtimeActions.setSidetopNavbarContent(contentId, key, value);
        }
    }, [runtimeActions, contentId, type]);
    const navigations = RuntimeContext.useSelectState((state) => state.navbar.sidetop.content);
    const isParent = React.useMemo(() => type === "sidetop" && navigations.items[contentId].children.length > 0, [navigations, type, contentId]);
    return (_jsx(Box, Object.assign({ h: "full", bg: "white", borderLeft: "1px solid", borderColor: "gray.300" }, { children: _jsxs(Scrollbars, Object.assign({ autoHide: true }, { children: [_jsxs(Flex, Object.assign({ h: "10", alignItems: "center", pl: "3", borderBottom: "1px solid", borderColor: "gray.300", color: "gray.900", fontWeight: "semibold" }, { children: [_jsx(IconButton, { fontSize: "lg", color: "gray.900", "aria-label": "Back From Nav Panel", icon: _jsx(ArrowLeftAlt, {}), variant: "link", onClick: () => {
                                editorActions.setRightPanel({ type: "navbar" });
                            } }), _jsx(Text, { children: content.label })] })), _jsx(PropsGroup, Object.assign({ name: "Appearance" }, { children: _jsxs(Stack, Object.assign({ py: "3" }, { children: [_jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: "4" }, { children: [_jsx(GridItem, Object.assign({ display: "flex", alignItems: "center", colSpan: 4 }, { children: _jsx(Text, { children: "Label" }) })), _jsx(GridItem, Object.assign({ colSpan: 8 }, { children: _jsx(StringPropertyEditor, { onChange: (value) => handleChange("label", value, type), propDef: { type: "string", options: { format: "text" } }, propName: "name", value: content.label }) }))] })), _jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: "4" }, { children: [_jsx(GridItem, Object.assign({ display: "flex", alignItems: "center", colSpan: 4 }, { children: _jsx(Text, { children: "Select icon" }) })), _jsx(GridItem, Object.assign({ colSpan: 8 }, { children: _jsxs(Menu, Object.assign({ isOpen: iconDisclosure.isOpen, onClose: iconDisclosure.onClose, isLazy: true }, { children: [_jsx(MenuButton, Object.assign({ as: Button, leftIcon: _jsx(Icon, { as: iconsList[content.icon] }), variant: "outline", fontWeight: "normal", textAlign: "left", w: "full", size: "sm", onClick: iconDisclosure.onOpen }, { children: humanize(content.icon || "Select icon") })), _jsx(Portal, { children: _jsx(MenuList, Object.assign({ p: "16px", width: "304px", height: "420px" }, { children: _jsxs(Tabs, Object.assign({ size: "sm" }, { children: [_jsxs(TabList, { children: [_jsx(Tab, Object.assign({ px: 0 }, { children: "All Icon" })), _jsx(Tab, Object.assign({ px: 0, ml: 4 }, { children: "Upload Icon" })), _jsx(Spacer, {}), _jsx(Button, Object.assign({ size: "sm", fontWeight: "normal", variant: "link", color: "black", _focus: { shadow: "none" }, _hover: { textDecoration: "none" }, display: !content.icon && "none", onClick: () => {
                                                                                handleChange("icon", "", type);
                                                                                iconDisclosure.onClose();
                                                                            } }, { children: "Remove" }))] }), _jsxs(TabPanels, { children: [_jsxs(TabPanel, Object.assign({ px: 0 }, { children: [_jsxs(InputGroup, { children: [_jsx(InputLeftElement, Object.assign({ pointerEvents: "none" }, { children: _jsx(Icon, { as: iconsList["Search"] }) })), _jsx(Input, { type: "text", placeholder: "Search icon", _placeholder: { fontSize: "sm" }, onChange: (e) => {
                                                                                                setIconInputSearch(e.target.value);
                                                                                            } })] }), _jsx(Box, Object.assign({ py: 4, overflowY: "auto", height: "308px" }, { children: _jsx(Scrollbars, { children: _jsx(SimpleGrid, Object.assign({ columns: 7, spacing: "10px" }, { children: Object.keys(iconsList)
                                                                                                .filter((icon) => icon
                                                                                                .toLowerCase()
                                                                                                .includes(iconInputSearch.trim()))
                                                                                                .map((icon) => {
                                                                                                return (_jsx(Box, Object.assign({ height: "30px", cursor: "pointer", onClick: () => {
                                                                                                        handleChange("icon", icon, type);
                                                                                                        iconDisclosure.onClose();
                                                                                                    } }, { children: _jsx(Center, Object.assign({ borderRadius: "md", _hover: {
                                                                                                            backgroundColor: "#F6F6F6",
                                                                                                        }, h: "30px", w: "30px" }, { children: _jsx(Icon, { fontSize: "lg", as: iconsList[icon] }) })) }), icon));
                                                                                            }) })) }) }))] })), _jsx(TabPanel, Object.assign({ px: 0 }, { children: _jsx(Box, Object.assign({ height: "308px", display: "flex", alignItems: "center", justifyContent: "center" }, { children: _jsx(Text, { children: "Coming Soon" }) })) }))] })] })) })) })] })) }))] }))] })) })), _jsx(PropsGroup, Object.assign({ name: "Behavior" }, { children: _jsxs(Stack, Object.assign({ py: "3" }, { children: [isParent && (_jsxs(Flex, Object.assign({ justifyContent: "space-between" }, { children: [_jsx(Text, { children: "Redirect on click" }), _jsx(Switch, { isChecked: content.linked, onChange: (e) => handleChange("linked", e.target.checked, type) })] }))), _jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: "4" }, { children: [_jsx(GridItem, Object.assign({ display: "flex", alignItems: "center", colSpan: 4 }, { children: _jsx(Text, { children: "Go to" }) })), _jsx(GridItem, Object.assign({ colSpan: 8 }, { children: _jsx(StringPropertyEditor, { propDef: {
                                                type: "string",
                                                options: { format: "select", options: pages },
                                            }, propName: "Page target", value: content.page, onChange: (value) => handleChange("page", value, type) }) }))] }))] })) })), _jsx(PropsGroup, Object.assign({ name: "Display" }, { children: _jsx(Stack, Object.assign({ py: "3" }, { children: _jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: "4" }, { children: [_jsx(GridItem, Object.assign({ display: "flex", alignItems: "center", colSpan: 4 }, { children: _jsx(Text, { children: "Show when" }) })), _jsx(GridItem, Object.assign({ colSpan: 8 }, { children: _jsx(FormulaEditor, { type: "boolean", value: content.showWhen || "true", onChange: (value) => handleChange("showWhen", value, type) }) }))] })) })) }))] })) })));
};
export default NavbarContent;
//# sourceMappingURL=NavbarContent.js.map