import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
import { Center, Flex, Box, Icon, SimpleGrid, Text } from "@chakra-ui/react";
import { registerComponent } from "../interfaces";
export default registerComponent("Menu Grid", {
    type: "none",
    icon: "Menu",
    group: "button",
    defaultProps: {
        /* Menu 1 */
        menu1Enabled: true,
        menu1Icon: "None",
        menu1Label: "Menu One",
        menu1Action: [{ type: "none" }],
        /* Menu 2 */
        menu2Enabled: true,
        menu2Icon: "None",
        menu2Label: "Menu Two",
        menu2Action: [{ type: "none" }],
        /* Menu 3 */
        menu3Enabled: true,
        menu3Icon: "None",
        menu3Label: "Menu Three",
        menu3Action: [{ type: "none" }],
        /* Menu 4 */
        menu4Enabled: true,
        menu4Icon: "None",
        menu4Label: "Menu Four",
        menu4Action: [{ type: "none" }],
    },
    propDefinition: {
        /* Menu 1 */
        menu1Enabled: {
            group: "Menu 1",
            type: "boolean",
            options: { format: "boolean" },
        },
        menu1Label: {
            group: "Menu 1",
            type: "expression",
            options: {},
        },
        menu1Icon: {
            group: "Menu 1",
            type: "string",
            options: {
                format: "icon",
                options: [],
            },
        },
        menu1Action: {
            group: "Menu 1",
            type: "action",
            options: [{ type: "none" }],
        },
        /* Menu 2 */
        menu2Enabled: {
            group: "Menu 2",
            type: "boolean",
            options: { format: "boolean" },
        },
        menu2Label: {
            group: "Menu 2",
            type: "expression",
            options: {},
        },
        menu2Icon: {
            group: "Menu 2",
            type: "string",
            options: {
                format: "icon",
                options: [],
            },
        },
        menu2Action: {
            group: "Menu 2",
            type: "action",
            options: [{ type: "none" }],
        },
        /* Menu 3 */
        menu3Enabled: {
            group: "Menu 3",
            type: "boolean",
            options: { format: "boolean" },
        },
        menu3Label: {
            group: "Menu 3",
            type: "expression",
            options: {},
        },
        menu3Icon: {
            group: "Menu 3",
            type: "string",
            options: {
                format: "icon",
                options: [],
            },
        },
        menu3Action: {
            group: "Menu 3",
            type: "action",
            options: [{ type: "none" }],
        },
        /* Menu 4 */
        menu4Enabled: {
            group: "Menu 4",
            type: "boolean",
            options: { format: "boolean" },
        },
        menu4Label: {
            group: "Menu 4",
            type: "expression",
            options: {},
        },
        menu4Icon: {
            group: "Menu 4",
            type: "string",
            options: {
                format: "icon",
                options: [],
            },
        },
        menu4Action: {
            group: "Menu 4",
            type: "action",
            options: [{ type: "none" }],
        },
    },
    Component: (props) => {
        const menus = [
            {
                label: props.hooks.useEvaluate(props.properties.menu1Label),
                icon: props.hooks.useTemplate(props.properties.menu1Icon),
                action: props.hooks.useActionTrigger(props.properties.menu1Action, props.data.page.row, props.pageSource),
                enabled: props.properties.menu1Enabled,
            },
            {
                label: props.hooks.useEvaluate(props.properties.menu2Label),
                icon: props.hooks.useTemplate(props.properties.menu2Icon),
                action: props.hooks.useActionTrigger(props.properties.menu2Action, props.data.page.row, props.pageSource),
                enabled: props.properties.menu2Enabled,
            },
            {
                label: props.hooks.useEvaluate(props.properties.menu3Label),
                icon: props.hooks.useTemplate(props.properties.menu3Icon),
                action: props.hooks.useActionTrigger(props.properties.menu3Action, props.data.page.row, props.pageSource),
                enabled: props.properties.menu3Enabled,
            },
            {
                label: props.hooks.useEvaluate(props.properties.menu4Label),
                icon: props.hooks.useTemplate(props.properties.menu4Icon),
                action: props.hooks.useActionTrigger(props.properties.menu4Action, props.data.page.row, props.pageSource),
                enabled: props.properties.menu4Enabled,
            },
        ];
        return (_jsx(_Fragment, { children: _jsx(SimpleGrid, Object.assign({ columns: menus.filter((menu) => menu.enabled).length, spacing: 3, px: 4, py: 2, textAlign: "center", bg: "transparent" }, { children: menus.map((menu) => menu.enabled && (_jsxs(Flex, Object.assign({ direction: "column", alignItems: "center", bg: "surface.900", cursor: "pointer", onClick: menu.action.handleClick, rounded: "md" }, { children: [_jsxs(Center, Object.assign({ boxSize: { base: 10, md: 14 }, w: { base: "none", md: 150 }, rounded: "lg", color: "brand.900" }, { children: [_jsx(Box, Object.assign({ w: "36px", h: "36px", p: "4px", mr: { base: "none", md: 2 } }, { children: _jsx(Icon, { boxSize: 6, as: props.components.iconsList[menu.icon] }) })), _jsx(Text, Object.assign({ display: { base: "none", md: "initial" }, fontSize: { base: 12, md: 16 }, "data-test": "menu-label-none" }, { children: menu.label }))] })), _jsx(Text, Object.assign({ display: { base: "initial", md: "none" }, fontSize: { base: 12, md: 16 }, "data-test": "menu-label-title" }, { children: menu.label }))] })))) })) }));
    },
});
//# sourceMappingURL=buildMenuGrid.js.map