import { jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
import React from "react";
import { isComponent, } from "../interfaces";
import { Box, Flex } from "@chakra-ui/react";
import { RuntimeContext } from "../RuntimeContext";
const ComponentWrapper = ({ children, instance }) => {
    var _a;
    const isStandalone = !instance.metadata.container && !instance.kind;
    const components = RuntimeContext.useSelectState((state) => state.maps.component);
    const getChildrenComponents = React.useCallback((id) => Object.values(components)
        .filter((component) => component.metadata.container === id)
        .flatMap((component) => component.componentID === "Container"
        ? getChildrenComponents(component.id)
        : [component]), [components]);
    const heightVal = instance.properties.height
        ? instance.properties.height.value
        : "100";
    const widthVal = instance.properties.width
        ? instance.properties.width.value
        : "100";
    switch (instance.kind) {
        case "container":
        case "layout":
            if (isComponent(instance, "@qorebase/container-component")) {
                return (_jsx(Flex, Object.assign({ w: widthVal === "fill"
                        ? "full"
                        : widthVal === "fixed"
                            ? `${Number(instance.properties.widthSize)}px`
                            : undefined, h: heightVal === "fill" && ((_a = instance.metadata) === null || _a === void 0 ? void 0 : _a.container)
                        ? "full"
                        : heightVal === "fixed"
                            ? `${instance.properties.heightSize}px`
                            : undefined }, { children: children })));
            }
            return _jsx(_Fragment, { children: children });
        default:
            return (_jsx(Box, Object.assign({ px: isStandalone ? "4" : 0, py: isStandalone ? "2" : 0, flex: "1 1 auto", maxW: isComponent(instance, "@qorebase/table-component") && "100%", w: "100%", h: (instance.componentID === "Image" ||
                    instance.componentID === "Location" ||
                    instance.componentID === "Banner") &&
                    instance.metadata.container !== undefined
                    ? "full"
                    : undefined, alignSelf: "stretch", overflow: (instance.componentID === "Image" ||
                    instance.componentID === "Location" ||
                    instance.componentID === "Banner") &&
                    instance.metadata.container !== undefined
                    ? "hidden"
                    : undefined }, { children: children })));
    }
};
export default ComponentWrapper;
//# sourceMappingURL=ComponentWrapper.js.map