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("ColumnLayout3", {
    type: "none",
    group: "layout",
    icon: "IconTemplate",
    hidden: true,
    defaultProps: {
        column1: "allDevice",
        column2: "allDevice",
        column3: "allDevice",
    },
    propDefinition: {
        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" },
                ],
            },
        },
        column3: {
            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: {
                    base: props.properties.column1 === "allDevice" ? "initial" : "none",
                    md: "initial",
                },
                column2: {
                    base: props.properties.column2 === "allDevice" ? "initial" : "none",
                    md: "initial",
                },
                column3: {
                    base: props.properties.column3 === "allDevice" ? "initial" : "none",
                    md: "initial",
                },
            };
        }, [props.properties]);
        return (_jsxs(Grid, Object.assign({ templateColumns: {
                base: "1fr",
                md: "1fr 1fr 1fr",
            }, gap: 1 }, { children: [_jsx(GridItem, Object.assign({ display: display.column1 }, { 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 }, { 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));
                        }) })), _jsx(GridItem, Object.assign({ display: display.column3 }, { children: group &&
                        group["3"] &&
                        group[3].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=buildColumnLayout3.js.map