import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { AddIcon } from "@chakra-ui/icons";
import { IconButton, Icon, Portal, Menu, MenuButton, MenuItem, MenuList, MenuGroup, } from "@chakra-ui/react";
import React from "react";
import iconsList from "@qorebase/app-runtime/src/components/iconsList";
import { RuntimeContext } from "@qorebase/app-runtime/src/RuntimeContext";
import { useNavigate } from "react-router-dom";
import { initialPage } from "@qorebase/app-runtime/src/InitialData";
const SYSTEM_PAGES = {
    login: {
        page: Object.assign(Object.assign({}, initialPage), { id: "login", components: [{ component: "login_component" }], type: "system", title: "Login" }),
        components: [
            {
                id: "login_component",
                componentID: "Login",
                options: {},
                properties: {},
                showCondition: { type: "all", conditions: [] },
                source: {
                    type: "list",
                    params: {},
                    sorts: {},
                },
                metadata: {},
            },
        ],
    },
    register: {
        page: Object.assign(Object.assign({}, initialPage), { id: "register", components: [
                {
                    component: "register_text_input",
                },
                {
                    component: "register_password_input",
                },
                {
                    component: "register_role_input",
                },
            ], type: "system", title: "Register", sourceID: "users", mode: "form" }),
        components: [
            {
                componentID: "Text Input",
                options: {},
                showCondition: { type: "all", conditions: [] },
                id: "register_text_input",
                properties: {
                    label: "Email",
                    placeholder: "Enter your email here",
                    hidden: false,
                    defaultValue: "",
                    data: {
                        inputID: "external_id",
                        field: {
                            type: "string",
                            options: {
                                format: "text",
                            },
                        },
                        validation: {
                            required: false,
                        },
                        type: "field",
                    },
                },
                source: {
                    type: "record",
                    params: {},
                    rowId: null,
                    defaultRow: { type: "first-row" },
                },
                metadata: {},
            },
            {
                componentID: "Password",
                options: {},
                showCondition: { type: "all", conditions: [] },
                id: "register_password_input",
                properties: {
                    title: "Password",
                    placeholder: "Enter your password here",
                    confirmPassword: true,
                    confirmTitle: "Confirm Password",
                    confirmPlaceholder: "Reenter your password here",
                    data: {
                        inputID: "password",
                        field: {
                            type: "string",
                            options: {
                                format: "text",
                            },
                        },
                        validation: {
                            required: true,
                        },
                        type: "field",
                    },
                },
                source: {
                    type: "record",
                    params: {},
                    rowId: null,
                    defaultRow: { type: "first-row" },
                },
                metadata: {},
            },
            {
                componentID: "Role",
                options: {},
                showCondition: { type: "all", conditions: [] },
                id: "register_role_input",
                properties: {
                    roleId: "",
                },
                source: {
                    type: "record",
                    params: {},
                    rowId: null,
                    defaultRow: { type: "first-row" },
                },
                metadata: {},
            },
        ],
    },
    not_found: {
        page: Object.assign(Object.assign({}, initialPage), { id: "not_found", components: [], type: "system", title: "Not found" }),
        components: [],
    },
    forbidden: {
        page: Object.assign(Object.assign({}, initialPage), { id: "forbidden", components: [{ component: "forbidden_component" }], type: "system", title: "Forbidden" }),
        components: [
            {
                id: "forbidden_component",
                componentID: "Forbidden",
                options: {},
                showCondition: { type: "all", conditions: [] },
                properties: {},
                metadata: {},
                source: {
                    type: "record",
                    params: {},
                    rowId: null,
                    defaultRow: { type: "first-row" },
                },
            },
        ],
    },
};
const AddPageMenu = () => {
    const { state } = RuntimeContext.useContext();
    const runtimeActions = RuntimeContext.useActions();
    const runtimeBatchActions = RuntimeContext.useBatchActions();
    const navigate = useNavigate();
    const handleAddPage = React.useCallback((option) => {
        const newPage = Object.assign(Object.assign({}, initialPage), { type: option.type === "type" ? option.value : undefined, mode: option.type === "mode" ? option.value : "display" });
        runtimeActions.addPage(newPage);
        navigate(`/page/${newPage.id}`);
    }, [navigate]);
    const addPageAndComponents = React.useCallback((page, components) => {
        runtimeBatchActions(() => {
            components.forEach((component) => {
                runtimeActions.addComponent(component);
            });
            runtimeActions.addPage(page);
        });
        navigate(`/page/${page.id}`);
    }, [navigate]);
    const hasLogin = Object.prototype.hasOwnProperty.call(state.maps.page, "login");
    const hasRegistration = Object.prototype.hasOwnProperty.call(state.maps.page, "register");
    const hasForbidden = Object.prototype.hasOwnProperty.call(state.maps.page, "forbidden");
    return (_jsxs(Menu, Object.assign({ autoSelect: false }, { children: [_jsx(MenuButton, { as: IconButton, icon: _jsx(Icon, { as: iconsList["Plus"], fontSize: "lg" }), "aria-label": "Add Page", borderRadius: "4px", variant: "solid", colorScheme: "blue", size: "xs" }), _jsx(Portal, { children: _jsxs(MenuList, { children: [_jsxs(MenuGroup, Object.assign({ title: "New page", color: "gray.500", fontSize: "xs" }, { children: [_jsx(MenuItem, Object.assign({ icon: _jsx(AddIcon, {}), onClick: () => handleAddPage({ type: "mode", value: "display" }) }, { children: "Regular" })), _jsx(MenuItem, Object.assign({ icon: _jsx(AddIcon, {}), onClick: () => handleAddPage({ type: "mode", value: "form" }) }, { children: "Form" }))] })), hasLogin && hasRegistration && hasForbidden ? null : (_jsxs(MenuGroup, Object.assign({ title: "From template", color: "gray.500", fontSize: "xs" }, { children: [!hasLogin && (_jsx(MenuItem, Object.assign({ icon: _jsx(Icon, { as: iconsList["User"], fontSize: "md" }), onClick: () => addPageAndComponents(SYSTEM_PAGES.login.page, SYSTEM_PAGES.login.components) }, { children: "Login Page" }))), !hasRegistration && (_jsx(MenuItem, Object.assign({ icon: _jsx(Icon, { as: iconsList["User"], fontSize: "md" }), onClick: () => addPageAndComponents(SYSTEM_PAGES.register.page, SYSTEM_PAGES.register.components) }, { children: "Registration Page" }))), !hasForbidden && (_jsx(MenuItem, Object.assign({ icon: _jsx(Icon, { as: iconsList["Warning"], fontSize: "md" }), onClick: () => addPageAndComponents(SYSTEM_PAGES.forbidden.page, SYSTEM_PAGES.forbidden.components) }, { children: "Error Page" })))] })))] }) })] })));
};
export default AddPageMenu;
//# sourceMappingURL=AddPageForm.js.map