import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box, Center, Icon, Tooltip } from "@chakra-ui/react";
import React from "react";
import iconsList from "@qorebase/app-runtime/src/components/iconsList";
import { buildComponent, } from "@qorebase/app-runtime/src/interfaces";
import { RuntimeContext } from "@qorebase/app-runtime/src/RuntimeContext";
import { useDrag } from "react-dnd";
import EditorContext from "@qorebase/app-runtime/src/EditorContext";
import AddCustomComponent from "./AddCustomComponent";
import { usePageParam } from "@qorebase/app-runtime/src/hooks/usePageParam";
const ComponentHandle = ({ component }) => {
    var _a;
    const pageID = usePageParam();
    const runtimeActions = RuntimeContext.useActions();
    const editorActions = EditorContext.useActions();
    const addComponent = React.useCallback((componentId, name, componentURL) => {
        const instance = buildComponent(componentId, {
            metadata: {
                name,
                componentURL,
            },
        });
        runtimeActions.addComponent(instance, { page: pageID });
        if (componentId === "Tab") {
            for (let i = 0; i < 2; i++) {
                const menuTab = buildComponent("Menu Tab", {
                    metadata: { idx: i + 1, container: instance.id },
                });
                runtimeActions.addComponent(menuTab, { page: pageID });
            }
        }
        editorActions.setActiveComponent(instance.id);
        editorActions.setEditMode("select");
    }, []);
    const [{ isDragging }, drag] = useDrag(() => ({
        type: component.kind || "element",
        item: { id: component.id },
        end: (item, monitor) => {
            var _a;
            const dropResult = monitor.getDropResult();
            if (!!item && !!dropResult) {
                const instance = buildComponent(item.id, {
                    metadata: { container: (_a = dropResult === null || dropResult === void 0 ? void 0 : dropResult.instance) === null || _a === void 0 ? void 0 : _a.id },
                });
                runtimeActions.addComponent(instance, { page: pageID });
                if (item.id === "Tab") {
                    for (let i = 0; i < 2; i++) {
                        const menuTab = buildComponent("Menu Tab", {
                            metadata: { idx: i + 1, container: instance.id },
                        });
                        runtimeActions.addComponent(menuTab, { page: pageID });
                    }
                }
            }
        },
        collect: (monitor) => ({
            isDragging: monitor.isDragging(),
        }),
    }));
    if (component.id === "Custom Component") {
        return (_jsx(AddCustomComponent, Object.assign({ handleAddComponent: addComponent }, { children: _jsxs(Center, Object.assign({ p: "2", pt: "4", bg: "white", rounded: "md", fontSize: "x-small", flexDirection: "column", textAlign: "center", gap: "1", shadow: "base", _hover: {
                    shadow: "md",
                } }, { children: [_jsx(Center, Object.assign({ p: "1", bg: "blue.50", rounded: "md" }, { children: _jsx(Icon, { fontSize: "xl", color: "blue.500", as: iconsList[component.icon] }) })), "Custom Component"] })) })));
    }
    return (_jsx(Tooltip, Object.assign({ label: "Double-click to Add", placement: "right", hasArrow: true, openDelay: 1500, rounded: "md", arrowSize: 8, closeOnMouseDown: true }, { children: _jsxs(Center, Object.assign({ ref: drag, opacity: isDragging ? 0.5 : 1, p: "2", pt: "4", bg: "white", rounded: "md", fontSize: "x-small", flexDirection: "column", textAlign: "center", gap: "1", shadow: "base", _hover: {
                shadow: "md",
            }, role: "button", onDoubleClick: () => addComponent(component.id), position: "relative" }, { children: [component.experimental && (_jsx(Box, Object.assign({ position: "absolute", top: "2px", left: "2px", bg: "yellow.300", fontSize: "xx-small", px: "3px", rounded: "sm" }, { children: "experimental" }))), _jsx(Center, Object.assign({ p: "1", bg: "blue.50", rounded: "md" }, { children: _jsx(Icon, { fontSize: "xl", color: "blue.500", as: iconsList[component.icon] }) })), (_a = component.name) !== null && _a !== void 0 ? _a : component.id] })) })));
};
export default ComponentHandle;
//# sourceMappingURL=ComponentHandle.js.map