import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box, Grid, GridItem } from "@chakra-ui/layout";
import React from "react";
import { registerComponent } from "../interfaces";
import RuntimeComponent from "../RuntimeComponent";
import GroupComponentsContext from "../GroupComponentsContext";
export default registerComponent("ColumnLayout2", {
    type: "none",
    group: "layout",
    icon: "IconTemplate",
    hidden: true,
    defaultProps: {
        size: "equal",
        column1: "allDevice",
        column2: "allDevice",
    },
    propDefinition: {
        size: {
            group: "Column Setting",
            type: "string",
            options: {
                format: "button",
                options: [
                    { icon: "IconMenu", value: "equal" },
                    { icon: "IconMenuUnfold", value: "biggerLeft" },
                    { icon: "IconMenuFold", value: "biggerRight" },
                ],
            },
        },
        column1: {
            group: "Column Setting",
            type: "string",
            options: {
                format: "select",
                options: [
                    { label: "Hidden on mobile", value: "hiddenOnMobile" },
                    { label: "All Device", value: "allDevice" },
                ],
            },
        },
        column2: {
            group: "Column Setting",
            type: "string",
            options: {
                format: "select",
                options: [
                    { label: "Hidden on mobile", value: "hiddenOnMobile" },
                    { label: "All Device", value: "allDevice" },
                ],
            },
        },
    },
    Component: (props) => {
        const layouts = GroupComponentsContext.useSelectState(({ componentsByLayouts }) => componentsByLayouts);
        const metadata = GroupComponentsContext.useSelectState(({ metadata }) => metadata);
        const group = React.useMemo(() => {
            return layouts[props.instance.id];
        }, [props.instance.id, layouts]);
        const display = React.useMemo(() => {
            return {
                column1: {
                    display: {
                        base: props.properties.column1 === "allDevice" ? "initial" : "none",
                        md: "initial",
                    },
                    colspan: props.properties.size === "equal"
                        ? 2
                        : props.properties.size === "biggerLeft"
                            ? 3
                            : 1,
                },
                column2: {
                    display: {
                        base: props.properties.column2 === "allDevice" ? "initial" : "none",
                        md: "initial",
                    },
                    colspan: props.properties.size === "equal"
                        ? 2
                        : props.properties.size === "biggerRight"
                            ? 3
                            : 1,
                },
            };
        }, [props.properties]);
        return (_jsxs(Grid, Object.assign({ templateColumns: {
                base: "1fr",
                md: "1fr 1fr 1fr 1fr",
            }, gap: 1 }, { children: [_jsx(GridItem, Object.assign({ display: display.column1.display, colSpan: display.column1.colspan }, { children: group &&
                        group["1"] &&
                        group[1].map((component) => {
                            return (_jsx(Box, { children: _jsx(RuntimeComponent, { row: metadata.row, source: metadata.source, error: metadata.error, loading: status === "loading", revalidate: metadata.revalidate, component: component }) }, component.component));
                        }) })), _jsx(GridItem, Object.assign({ display: display.column2.display, colSpan: display.column2.colspan }, { children: group &&
                        group["2"] &&
                        group[2].map((component) => {
                            return (_jsx(Box, { children: _jsx(RuntimeComponent, { row: metadata.row, source: metadata.source, error: metadata.error, loading: status === "loading", revalidate: metadata.revalidate, component: component }) }, component.component));
                        }) }))] })));
    },
});
//# sourceMappingURL=buildColumnLayout2.js.map