import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import React from "react";
import { Box } from "@chakra-ui/layout";
import { useOutsideClick } from "@chakra-ui/react";
import { useDragLayer, useDrop } from "react-dnd";
import { css } from "@emotion/react";
import { RuntimeContext } from "../RuntimeContext";
const acceptMap = {
    layout: ["container"],
    container: ["element", "layout", "container"],
    element: [],
};
const EditModeWrapper = ({ children, isActive, onClick, onBlur, instance }) => {
    const [{ canDrop, isOver }, drop] = useDrop(() => ({
        accept: acceptMap[instance.kind] || "element",
        drop: (_item, monitor) => {
            const didDrop = monitor.didDrop();
            if (didDrop) {
                return;
            }
            return { instance };
        },
        collect: (monitor) => ({
            isOver: monitor.isOver({ shallow: true }),
            canDrop: monitor.canDrop(),
        }),
    }));
    const isDragActive = canDrop && isOver;
    const { isDragging } = useDragLayer((monitor) => ({
        isDragging: monitor.isDragging(),
    }));
    const ref = React.useRef();
    useOutsideClick({
        ref: ref,
        handler: onBlur,
    });
    const widthVal = instance.properties.width
        ? instance.properties.width.value
        : "100";
    const heightVal = instance.properties.height
        ? instance.properties.height.value
        : "100";
    const parentComponent = RuntimeContext.useSelectState((state) => state.maps.component[!instance.metadata.container ? instance.id : instance.metadata.container].properties.direction);
    const flexStyle = React.useMemo(() => {
        if (parentComponent === "row") {
            return {
                flex: widthVal === "fill"
                    ? "1"
                    : widthVal === "hug"
                        ? "0 1 auto"
                        : `0 0 ${instance.properties.widthSize}px`,
                alignSelf: heightVal === "fill" ? "stretch" : undefined,
            };
        }
        else {
            return {
                flex: heightVal === "fill"
                    ? "1"
                    : heightVal === "hug"
                        ? "0 1 auto"
                        : `0 0 ${instance.properties.heightSize}px`,
                alignSelf: widthVal === "fill" ? "stretch" : undefined,
            };
        }
    }, [instance, parentComponent]);
    const wrapperStyle = ["container", "layout"].includes(instance.kind)
        ? {
            p: "1",
            bg: isDragActive ? "blue.100" : "blackAlpha.50",
            border: "1px dashed #fff",
            flex: instance.componentID === "Containers" ? flexStyle.flex : "1",
            alignSelf: instance.componentID === "Containers"
                ? flexStyle.alignSelf
                : undefined,
            css: css `
          &:after {
            content: "${instance.componentID}";
            position: absolute;
            top: -5px;
            left: 6px;
            font-size: 9px;
            background: #fff;
            padding: 0 2px;
            border-radius: 3px;
            line-height: 10px;
            z-index: 1;
          }
        `,
        }
        : {
            flex: "1",
            alignSelf: "stretch",
            w: "full",
            h: (instance.componentID === "Image" ||
                instance.componentID === "Location" ||
                instance.componentID === "Banner") &&
                instance.metadata.container !== undefined
                ? "full"
                : undefined,
            overflow: (instance.componentID === "Image" ||
                instance.componentID === "Location" ||
                instance.componentID === "Banner") &&
                instance.metadata.container !== undefined
                ? "hidden"
                : undefined,
        };
    return (_jsxs(Box, Object.assign({ ref: drop, position: "relative" }, wrapperStyle, { children: [_jsx(Box, { ref: ref, position: "absolute", top: "0", bottom: "0", left: "0", right: "0", rounded: "sm", border: isActive ? "1px solid" : undefined, borderColor: "blue.300", pointerEvents: isDragging ? "none" : undefined, zIndex: 1, cursor: "pointer", transition: "all 50ms ease-out", _hover: {
                    bg: "blue.100",
                    opacity: 0.2,
                }, onClick: onClick }), children] })));
};
export default EditModeWrapper;
//# sourceMappingURL=EditModeWrapper.js.map