import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
import React from "react";
import { Box, Button, Center, Flex, FormControl, FormLabel, Grid, GridItem, Icon, Input, InputGroup, InputLeftElement, Menu, MenuButton, MenuList, Portal, Select, SimpleGrid, Spacer, Stack, Tab, TabList, TabPanel, TabPanels, Tabs, Text, Tooltip, useDisclosure, Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, PopoverFooter, PopoverArrow, PopoverCloseButton, Drawer, DrawerBody, DrawerContent, ButtonGroup, HStack, IconButton, VStack, Collapse, } from "@chakra-ui/react";
import { Scrollbars } from "rc-scrollbars";
import { RuntimeContext } from "@qorebase/app-runtime/src/RuntimeContext";
import iconsList from "@qorebase/app-runtime/src/components/iconsList";
import StringPropertyEditor from "./property/string";
import { humanize } from "@qorebase/app-runtime/src/utils/humanizeString";
import PropertyEditorByType from "./property";
import { useVariablesContext, VariablesProvider, } from "@qorebase/app-runtime/src/VariablesContext";
import { usePageVariables } from "./ComponentEditorPanel";
import { useSourceHooks } from "@qorebase/app-runtime/src/hooks/sourceHooks/useSourceHooks";
import { ChevronDownIcon, InfoOutlineIcon } from "@chakra-ui/icons";
import { useSchemaSource } from "@qorebase/app-runtime/src/hooks/useSchemaSource";
import ExpressionPropertyEditor from "./property/expression";
import { css } from "@emotion/react";
import { omit } from "@qorebase/app-runtime/src/utils/omit";
import { ArrowLeft, Close, Edit, Plus } from "@feedloop/icon";
import _ from "lodash";
import SourceSelector from "./SourceSelector";
import { usePageParam } from "@qorebase/app-runtime/src/hooks/usePageParam";
import { initialPage } from "@qorebase/app-runtime/src/InitialData";
const ParamsPage = ({ isPredefined, page, pageID, parameters, keys, handleDeleteParams, handleValueChange, handleKeyChange, }) => {
    var _a, _b, _c, _d, _e;
    const runtimeActions = RuntimeContext.useActions();
    const [editing, setEditing] = React.useState(isPredefined ? false : parameters[keys].edit);
    const popoverDisclosure = useDisclosure();
    const [isHoveringDelete, setIsHoveringDelete] = React.useState(false);
    const [isValidKey, setIsValidKey] = React.useState(true);
    const handleRowIDChange = React.useCallback((defaultRowID) => {
        runtimeActions.updatePage({ page: pageID }, (draft) => {
            if (draft.defaultRow.type === "row-id") {
                draft.defaultRow.rowId = defaultRowID;
            }
        });
    }, [runtimeActions, pageID]);
    const keyList = React.useMemo(() => {
        if (keys) {
            return new Set(Object.keys(parameters)
                .filter((key) => key !== keys)
                .concat("rowId"));
        }
        return new Set(["rowId"]);
    }, [parameters, keys]);
    const validateKey = React.useCallback((value) => !keyList.has(value) && value !== "" && value.indexOf(" ") < 0, [keyList]);
    const handleKeyBlur = React.useCallback((value) => {
        if (!keyList.has(value)) {
            if (!validateKey(value)) {
                setEditing(true);
            }
            else {
                setEditing(false);
                handleKeyChange(keys, keys.includes("_") ? _.snakeCase(value) : _.camelCase(value));
            }
        }
    }, [isValidKey, keyList, keys, validateKey]);
    const handleInputKeyChange = React.useCallback((value) => {
        setIsValidKey(validateKey(value));
    }, [validateKey]);
    return (_jsxs(Popover, Object.assign({ placement: "left", offset: [40, 270], arrowPadding: 80, isLazy: true, isOpen: popoverDisclosure.isOpen }, { children: [_jsxs(Stack, Object.assign({ bg: "#F5F5F5", m: "8px 12px", p: "8px 12px", gap: 3, borderRadius: "4px" }, { children: [_jsxs(HStack, Object.assign({ justify: "space-between", minH: "30px" }, { children: [_jsxs(Flex, Object.assign({ gap: 4, align: "center" }, { children: [_jsx(Text, Object.assign({ fontSize: "sm", fontWeight: "bold", my: 1, display: isPredefined ? "block" : editing ? "none" : "block" }, { children: isPredefined ? "rowId" : keys })), _jsx(IconButton, { "aria-label": "delete params", size: "16px !important", bg: "#F5F5F5", _hover: { bg: "#F5F5F5" }, m: "0 !important", display: isPredefined || editing ? "none" : "flex", icon: _jsx(Edit, { fontSize: "16px" }), onClick: !isPredefined &&
                                            (() => {
                                                setEditing(true);
                                            }) })] })), !isPredefined && editing && (_jsxs(InputGroup, Object.assign({ flexDirection: "column" }, { children: [_jsx(StringPropertyEditor, { onBlur: handleKeyBlur, onChange: !isPredefined && handleInputKeyChange, propDef: {
                                            type: "string",
                                            options: { format: "text" },
                                        }, propName: "Value", placeholder: "Insert value", value: keys, autoFocus: true, isError: isValidKey }), !isValidKey && (_jsx(Text, Object.assign({ mt: 1, size: "sm", color: "red.400" }, { children: "Try another name" })))] }))), _jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "delete params", size: "16px !important", bg: "#F5F5F5", _hover: { bg: "#F5F5F5" }, m: "0 !important", display: isPredefined || editing ? "none" : "flex", icon: _jsx(Close, { fontSize: "16px" }), onClick: popoverDisclosure.onToggle }) })] })), isPredefined && (_jsxs(HStack, Object.assign({ m: "0 !important", justify: "space-between" }, { children: [_jsx(Text, Object.assign({ fontSize: "sm", my: 1 }, { children: "Static ID" })), _jsx(PropertyEditorByType.boolean, { propDef: {
                                    type: "boolean",
                                    options: {},
                                }, propName: "custom", value: Boolean(page === null || page === void 0 ? void 0 : page.staticId), onChange: (e) => {
                                    runtimeActions.updatePage({ page: pageID }, (draft) => {
                                        draft.staticId = Boolean(e);
                                        draft.defaultRow =
                                            e === false
                                                ? {
                                                    type: "row-id",
                                                    rowId: "",
                                                }
                                                : draft.defaultRow;
                                    });
                                } })] }))), isPredefined && (page === null || page === void 0 ? void 0 : page.staticId) && (_jsxs(HStack, Object.assign({ m: "0 !important", justify: "space-between" }, { children: [_jsx(Text, Object.assign({ fontSize: "sm", my: 1 }, { children: "First Row" })), _jsx(PropertyEditorByType.boolean, { propDef: {
                                    type: "boolean",
                                    options: {},
                                }, propName: "custom", value: ((_a = page === null || page === void 0 ? void 0 : page.defaultRow) === null || _a === void 0 ? void 0 : _a.type) === "first-row" ? true : false, onChange: (e) => {
                                    runtimeActions.updatePage({ page: pageID }, (draft) => {
                                        draft.defaultRow =
                                            e === true
                                                ? { type: "first-row" }
                                                : { type: "row-id", rowId: "" };
                                    });
                                } })] }))), isPredefined && (page === null || page === void 0 ? void 0 : page.staticId) && ((_b = page === null || page === void 0 ? void 0 : page.defaultRow) === null || _b === void 0 ? void 0 : _b.type) === "row-id" && (_jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2 }, { children: [_jsx(GridItem, Object.assign({ colSpan: 4, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: "Value" }) })), _jsx(GridItem, Object.assign({ colSpan: 8 }, { children: _jsx(ExpressionPropertyEditor, { onChange: handleRowIDChange, propDef: {
                                        type: "expression",
                                        options: {},
                                    }, propName: "Value", placeholder: "Insert value", value: ((_c = page.defaultRow) === null || _c === void 0 ? void 0 : _c.type) === "row-id" && ((_d = page === null || page === void 0 ? void 0 : page.defaultRow) === null || _d === void 0 ? void 0 : _d.rowId) }) }))] }))), parameters && !isPredefined && (_jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2 }, { children: [_jsx(GridItem, Object.assign({ colSpan: 4, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: "Default Value" }) })), _jsx(GridItem, Object.assign({ colSpan: 8 }, { children: _jsx(ExpressionPropertyEditor, { onChange: (value) => {
                                        handleValueChange(keys, value);
                                    }, propDef: {
                                        type: "expression",
                                        options: {},
                                    }, propName: "Value", placeholder: "Insert value", value: (_e = parameters[keys]) === null || _e === void 0 ? void 0 : _e.value }) }))] })))] })), _jsxs(PopoverContent, Object.assign({ w: "275px", onBlur: () => {
                    if (!isHoveringDelete) {
                        popoverDisclosure.onClose();
                    }
                } }, { children: [_jsx(PopoverArrow, {}), _jsx(PopoverCloseButton, { onClick: () => popoverDisclosure.onClose() }), _jsxs(PopoverHeader, Object.assign({ fontWeight: "bold", fontSize: "sm" }, { children: ["Delete \"", `${keys}`, "\" ?"] })), _jsxs(PopoverBody, { children: [_jsx(Text, { children: "Deleting this may affect other function that using this parameter." }), _jsx(Text, Object.assign({ mt: 2 }, { children: "This action is not undoable. " }))] }), _jsx(PopoverFooter, Object.assign({ display: "flex", justifyContent: "flex-end", border: "0px" }, { children: _jsxs(ButtonGroup, Object.assign({ size: "sm", gap: "10px" }, { children: [_jsx(Button, Object.assign({ variant: "outline", fontWeight: "normal", p: "4px 8px", m: "0 !important", onClick: () => popoverDisclosure.onClose() }, { children: "Cancel" })), _jsx(Button, Object.assign({ colorScheme: "red", fontWeight: "normal", p: "4px 8px", m: "0 !important", onMouseEnter: () => setIsHoveringDelete(true), onMouseLeave: () => setIsHoveringDelete(false), onClick: () => {
                                        handleDeleteParams(keys);
                                        popoverDisclosure.onClose();
                                    } }, { children: "Delete" }))] })) }))] }))] })));
};
const DrawerPageParameters = ({ drawerDisclosure, }) => {
    var _a;
    const runtimeActions = RuntimeContext.useActions();
    const { componentRef } = useVariablesContext();
    const pageID = usePageParam();
    const page = RuntimeContext.useSelectState((state) => state.maps.page[pageID]);
    const { variables } = useVariablesContext();
    const ref = React.useRef(null);
    const deletes = React.useMemo(() => {
        return variables
            .filter((variable) => variable.display.startsWith("params") ||
            variable.display.startsWith("input") ||
            variable.display.startsWith("rowId"))
            .map((variable) => variable.display);
    }, [variables]);
    const generatePageParams = React.useCallback((params, config) => Object.fromEntries(Object.keys(params || {})
        .filter((key) => key !== "rowId")
        .map((key) => {
        var _a;
        return [
            key,
            {
                value: params[key],
                edit: ((_a = config === null || config === void 0 ? void 0 : config.editable) === null || _a === void 0 ? void 0 : _a.has(key)) || false,
            },
        ];
    })), []);
    const pageParams = React.useMemo(() => generatePageParams(page === null || page === void 0 ? void 0 : page.params), [page === null || page === void 0 ? void 0 : page.id]);
    const [parameters, setParameters] = React.useState(pageParams);
    const generateNewParams = React.useCallback((params) => {
        const nextKey = `parameter${Object.keys(params || {}).length}`;
        const key = Object.prototype.hasOwnProperty.call(params, nextKey)
            ? `${nextKey}1`
            : nextKey;
        return { key, value: "" };
    }, []);
    const handleAddparams = React.useCallback(() => {
        if (!page.params)
            return;
        const { key, value } = generateNewParams(page.params || {});
        const newParams = Object.assign(Object.assign({}, (page.params || {})), { [key]: value });
        setParameters(generatePageParams(newParams, { editable: new Set([key]) }));
        runtimeActions.updatePage({ page: page === null || page === void 0 ? void 0 : page.id }, (page) => {
            page.params = newParams;
        });
    }, [page === null || page === void 0 ? void 0 : page.id, page === null || page === void 0 ? void 0 : page.params]);
    const handleDeleteparams = React.useCallback((key) => {
        if (!(page === null || page === void 0 ? void 0 : page.params))
            return;
        const params = Object.assign({}, page.params);
        const newParams = omit([key], params);
        setParameters(generatePageParams(newParams));
        runtimeActions.updatePage({ page: page === null || page === void 0 ? void 0 : page.id }, (page) => {
            page.params = newParams;
        });
    }, [page === null || page === void 0 ? void 0 : page.id, page.params]);
    const handleValueChange = React.useCallback((key, value) => {
        if (!(page === null || page === void 0 ? void 0 : page.params))
            return;
        const params = Object.assign({}, page.params);
        const newParams = Object.assign(Object.assign({}, params), { [key]: value });
        setParameters(generatePageParams(newParams));
        runtimeActions.updatePage({ page: page === null || page === void 0 ? void 0 : page.id }, (page) => {
            page.params = newParams;
        });
    }, [page === null || page === void 0 ? void 0 : page.id, page === null || page === void 0 ? void 0 : page.params]);
    const handleKeyChange = React.useCallback((oldKey, newKey) => {
        if (oldKey !== newKey) {
            runtimeActions.updatePage({ page: page === null || page === void 0 ? void 0 : page.id }, (page) => {
                const params = Object.assign({}, page.params);
                if (!Object.keys(params).includes(newKey)) {
                    const newParams = Object.assign(Object.assign({}, omit([oldKey], params)), { [newKey]: params[oldKey] });
                    page.params = newParams;
                    setParameters(generatePageParams(newParams));
                }
                else {
                    const newParams = Object.assign(Object.assign({}, params), { [oldKey]: params[oldKey] });
                    page.params = newParams;
                    setParameters(generatePageParams(newParams));
                }
            });
        }
    }, [page === null || page === void 0 ? void 0 : page.id]);
    React.useEffect(() => {
        runtimeActions.updatePage({ page: page.id }, (draft) => {
            var _a, _b;
            if (((_a = draft.defaultRow) === null || _a === void 0 ? void 0 : _a.type) === "first-row" ||
                ((_b = draft.defaultRow) === null || _b === void 0 ? void 0 : _b.rowId) !== "") {
                draft.staticId = true;
            }
        });
    }, []);
    React.useEffect(() => {
        setParameters(pageParams);
        return () => {
            setParameters({});
        };
    }, [pageParams]);
    return (_jsx(VariablesProvider, Object.assign({ deletes: deletes }, { children: _jsx(Portal, { children: _jsx(Box, Object.assign({ css: css `
            .chakra-modal__content-container {
              width: 0vw !important;
            }
          `, ref: ref }, { children: drawerDisclosure.isOpen && (_jsx(Drawer, Object.assign({ isOpen: drawerDisclosure.isOpen, placement: "right", onClose: drawerDisclosure.onClose, blockScrollOnMount: false, portalProps: { containerRef: ref } }, { children: _jsx(DrawerContent, Object.assign({ borderColor: "#E2E8F0", height: "calc(100% - 49px)", borderRadius: "0px", transform: "none !important", boxShadow: "unset", css: css `
                  top: inherit !important;
                  max-width: unset;
                  width: ${((_a = componentRef === null || componentRef === void 0 ? void 0 : componentRef.divElement) === null || _a === void 0 ? void 0 : _a.offsetWidth) ||
                            0}px !important;
                ` }, { children: _jsxs(DrawerBody, Object.assign({ padding: "0px", overflow: "unset" }, { children: [_jsxs(HStack, Object.assign({ h: "2.6rem", paddingX: "15px", spacing: "12px", borderTopWidth: "1px", borderBottomWidth: "2px", borderColor: "#E2E8F0" }, { children: [_jsx(ArrowLeft, { fontSize: "18px", color: "#171717", onClick: drawerDisclosure.onClose, cursor: "pointer" }), _jsx(Text, Object.assign({ fontSize: "sm", fontWeight: "bold" }, { children: "Define Parameters" }))] })), _jsxs(Flex, Object.assign({ w: "full", justify: "space-between", padding: "8px 12px" }, { children: [_jsx(Text, Object.assign({ color: "#171717", fontSize: "sm", fontWeight: "bold" }, { children: "Parameters" })), _jsx(Plus, { fontSize: "18px", color: "#171717", cursor: "pointer", onClick: handleAddparams })] })), _jsxs(Box, Object.assign({ style: {
                                        overflowY: "auto",
                                        height: `${(componentRef === null || componentRef === void 0 ? void 0 : componentRef.divElement.clientHeight) - 35}px`,
                                    } }, { children: [_jsx(ParamsPage, { isPredefined: true, pageID: pageID, page: page }), Object.keys(parameters).map((keys) => {
                                            return (_jsx(ParamsPage, { handleDeleteParams: handleDeleteparams, handleValueChange: handleValueChange, handleKeyChange: handleKeyChange, isPredefined: false, pageID: pageID, page: page, parameters: parameters, keys: keys }, keys));
                                        })] }))] })) })) }))) })) }) })));
};
export default function PageGeneral() {
    const pageID = usePageParam();
    const page = RuntimeContext.useSelectState((state) => state.maps.page[pageID]);
    const { variables: pageVariables } = usePageVariables();
    const sources = useSchemaSource((page === null || page === void 0 ? void 0 : page.mode) !== "form"
        ? ["tables", "views", "insights"]
        : ["tables", "views", "insights", "queries"]);
    const view = React.useMemo(() => {
        return sources.find((source) => source.name === (page === null || page === void 0 ? void 0 : page.sourceID));
    }, [sources, page === null || page === void 0 ? void 0 : page.sourceID]);
    const runtimeActions = RuntimeContext.useActions();
    const iconDisclosure = useDisclosure();
    const [iconInputSearch, setIconInputSearch] = React.useState("");
    const handleRename = React.useCallback((title) => {
        runtimeActions.updatePage({ page: pageID }, (draft) => {
            draft.title = title;
        });
    }, [runtimeActions, pageID]);
    const collapseDisclosure = useDisclosure({ defaultIsOpen: true });
    const drawerDisclosure = useDisclosure({ defaultIsOpen: false });
    const handleTitleChange = React.useCallback((value) => {
        runtimeActions.setPageProperty({ page: pageID }, "title", value);
    }, [runtimeActions, pageID]);
    const source = React.useMemo(() => {
        return {
            rowId: null,
            type: "record",
            target: page === null || page === void 0 ? void 0 : page.sourceID,
            defaultRow: { type: "first-row" },
            params: {},
        };
    }, [page === null || page === void 0 ? void 0 : page.sourceID]);
    const sourceHooks = useSourceHooks(source);
    const handleUpdateParams = React.useCallback((slug, value) => {
        runtimeActions.updatePage({ page: pageID }, (draft) => {
            if (!draft.sourceParams) {
                draft.sourceParams = {};
            }
            draft.sourceParams[slug] = value;
        });
    }, [pageID]);
    if (!page)
        return null;
    return (_jsx(VariablesProvider, Object.assign({ variables: pageVariables }, { children: _jsx(Box, Object.assign({ as: "form", "data-test-id": "page-setting-panel", p: "4" }, { children: _jsxs(Stack, Object.assign({ spacing: 2 }, { children: [_jsxs(FormControl, { children: [_jsx(FormLabel, Object.assign({ fontWeight: "semibold" }, { children: "Name" })), _jsx(StringPropertyEditor, { onChange: handleRename, propDef: { type: "string", options: { format: "text" } }, propName: "name", value: page.title }, page.id)] }), _jsxs(FormControl, Object.assign({ pt: 2 }, { children: [_jsx(FormLabel, Object.assign({ fontWeight: "semibold" }, { children: "Title" })), _jsx(StringPropertyEditor, { propName: "title", value: page.properties.values["title"] ||
                                    initialPage.properties.values["title"], view: view, propDef: { type: "string", options: { format: "text" } }, onChange: handleTitleChange }, "title")] })), _jsxs(FormControl, Object.assign({ pt: 2 }, { children: [_jsxs(FormLabel, Object.assign({ fontWeight: "semibold" }, { children: ["Data Source \u00A0", _jsx(Tooltip, Object.assign({ hasArrow: true, label: "In this page context you can choose the Qorebase table/grid which will be the source of data on this page." }, { children: _jsx(InfoOutlineIcon, {}) }))] })), _jsx(SourceSelector, { value: page.sourceID, onChange: (option) => {
                                    runtimeActions.updatePage({ page: pageID }, (draft) => {
                                        draft.sourceID = option.value;
                                    });
                                }, sources: sources })] })), _jsxs(Flex, Object.assign({ pt: 2 }, { children: [_jsx(FormLabel, Object.assign({ flex: 0, fontWeight: "semibold" }, { children: "Prefetch" })), _jsx(PropertyEditorByType.boolean, { propDef: {
                                    type: "boolean",
                                    options: {},
                                }, propName: "limit", value: page.prefetch, onChange: (prefetch) => {
                                    runtimeActions.updatePage({ page: pageID }, (draft) => {
                                        draft.prefetch = prefetch;
                                    });
                                } })] })), sourceHooks.params.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, Object.assign({ fontWeight: "semibold" }, { children: "Parameters" })), sourceHooks.params.map((param) => {
                                var _a;
                                return (_jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2, my: "8px" }, { children: [_jsx(GridItem, Object.assign({ colSpan: 3, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: param.slug }) })), _jsx(GridItem, Object.assign({ colSpan: 9, my: "8px" }, { children: _jsx(PropertyEditorByType.string, { propDef: {
                                                    type: "string",
                                                    options: { format: "text" },
                                                }, propName: param.slug, value: (_a = page.sourceParams) === null || _a === void 0 ? void 0 : _a[param.slug], onChange: (val) => {
                                                    handleUpdateParams(param.slug, val);
                                                } }) }))] }), param.slug));
                            })] })), _jsxs(VStack, Object.assign({ width: "full" }, { children: [_jsxs(HStack, Object.assign({ width: "full", py: 3 }, { children: [_jsx(Text, Object.assign({ fontWeight: "semibold" }, { children: "Page Parameters" })), _jsx(Box, { flex: 1 }), _jsx(Icon, { boxSize: 5, as: ChevronDownIcon, cursor: "pointer", transition: "all 300ms ease-out", transform: `rotate(${collapseDisclosure.isOpen ? 0 : -90}deg)`, onClick: collapseDisclosure.onToggle })] })), _jsx(Box, Object.assign({ width: "full", m: "0 !important" }, { children: _jsxs(Collapse, Object.assign({ style: { overflow: "revert" }, in: collapseDisclosure.isOpen }, { children: [_jsx(Text, Object.assign({ py: 2 }, { children: "Define the parameters that are passed into this page and will be used by components inside of it." })), _jsxs(Button, Object.assign({ colorScheme: "gray", variant: "outline", size: "sm", w: "full", gap: "5px", onClick: drawerDisclosure.onOpen }, { children: [_jsx(Icon, { as: iconsList["Cog"] }), "Define parameters"] }))] })) }))] })), _jsx(DrawerPageParameters, { drawerDisclosure: drawerDisclosure }), _jsxs(FormControl, Object.assign({ pt: 2 }, { children: [_jsxs(FormLabel, Object.assign({ fontWeight: "semibold" }, { children: ["Page Mode \u00A0", _jsx(Tooltip, Object.assign({ hasArrow: true, label: "If you choose form mode, this page will send data to the table/grid that you have selected in the page context above." }, { children: _jsx(InfoOutlineIcon, {}) }))] })), _jsx(Select, Object.assign({ size: "sm", value: page.mode || "display", onChange: (e) => {
                                    const selected = e.currentTarget.value;
                                    runtimeActions.updatePage({ page: pageID }, (draft) => {
                                        // @ts-ignore
                                        draft.mode = selected;
                                    });
                                } }, { children: ["display", "form"].map((mode) => (_jsx("option", Object.assign({ value: mode }, { children: mode }), mode))) }))] })), page.mode === "form" && (_jsxs(FormControl, Object.assign({ pt: 2 }, { children: [_jsx(FormLabel, Object.assign({ fontWeight: "semibold" }, { children: "Form Actions" })), _jsx(PropertyEditorByType.action, { propDef: { type: "action", options: [{ type: "none" }] }, propName: "onSuccess", 
                                //  @ts-ignore
                                value: typeof page.properties.values["onSuccess"] === "undefined"
                                    ? initialPage.properties.values["onSuccess"]
                                    : page.properties.values["onSuccess"], onChange: (value) => {
                                    runtimeActions.setPageProperty({ page: page.id }, "onSuccess", value);
                                } }), _jsxs(Flex, Object.assign({ pt: 4 }, { children: [_jsx(FormLabel, Object.assign({ flex: 0, fontWeight: "semibold" }, { children: "Show Delete" })), _jsx(PropertyEditorByType.boolean, { propDef: {
                                            type: "boolean",
                                            options: {},
                                        }, propName: "limit", value: page.properties.deletableForm, onChange: (deletableForm) => {
                                            runtimeActions.updatePage({ page: pageID }, (draft) => {
                                                draft.properties.deletableForm = deletableForm;
                                            });
                                        } })] }))] }))), _jsxs(FormControl, { children: [_jsxs(FormLabel, Object.assign({ fontWeight: "semibold" }, { children: ["Icon \u00A0", _jsx(Tooltip, Object.assign({ hasArrow: true, label: "This icon will appear when the page becomes menu (sidebar menu)." }, { children: _jsx(InfoOutlineIcon, {}) }))] })), _jsxs(Menu, Object.assign({ isOpen: iconDisclosure.isOpen, onClose: iconDisclosure.onClose, isLazy: true }, { children: [_jsx(MenuButton, Object.assign({ as: Button, leftIcon: _jsx(Icon, { as: iconsList[page.icon] }), variant: "outline", fontWeight: "normal", textAlign: "left", w: "full", size: "sm", onClick: iconDisclosure.onOpen }, { children: humanize(page.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: !page.icon && "none", onClick: () => {
                                                                    runtimeActions.updatePage({ page: pageID }, (draft) => {
                                                                        // eslint-disable-next-line fp/no-delete -- immer
                                                                        delete draft.icon;
                                                                    });
                                                                    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: () => {
                                                                                            runtimeActions.updatePage({ page: pageID }, (draft) => {
                                                                                                draft.icon = icon;
                                                                                            });
                                                                                            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" }) })) }))] })] })) })) })] }))] })] })) })) })));
}
//# sourceMappingURL=PageGeneral.js.map