import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Portal, useDisclosure, Icon, Input, Box, Divider, Flex, HStack, Spacer, Text, Menu, MenuButton, MenuItem, MenuList, } from "@chakra-ui/react";
import { css } from "@emotion/react";
import { DotMore } from "@feedloop/icon";
import produce from "immer";
import React from "react";
import { DragDropContext, Draggable, Droppable, } from "react-beautiful-dnd";
import iconsList from "@qorebase/app-runtime/src/components/iconsList";
import { getComponent, isComponent, } from "@qorebase/app-runtime/src/interfaces";
import { bannedComponents } from "./ComponentsManager";
import EditorContext from "@qorebase/app-runtime/src/EditorContext";
import Scrollbars from "rc-scrollbars";
import { usePageParam } from "@qorebase/app-runtime/src/hooks/usePageParam";
const MenuOptions = React.memo(function MenuOptions({ component, layer1, onRemoveComponent, onRemoveFromLayout, onStateChange, }) {
    const page = usePageParam();
    const handleRemoveComponent = React.useCallback(() => {
        onRemoveComponent({ component: component.id }, { page: page }, (isComponent(component, "ColumnLayout2") ||
            isComponent(component, "ColumnLayout3")) &&
            layer1
            ? {
                layoutDetail: {
                    componentsID: (layer1[component.id] || []).map((comp) => comp.id),
                },
            }
            : undefined);
    }, [layer1]);
    return (_jsxs(Menu, Object.assign({ placement: "right-end", isLazy: true }, { children: [_jsx(MenuButton, { children: _jsx(Icon, { as: DotMore }) }), _jsx(Portal, { children: _jsxs(MenuList, { children: [_jsx(MenuItem, Object.assign({ onClick: () => {
                                onStateChange((state) => produce(state, (draft) => {
                                    draft.componentBeingEdit = component.id;
                                }));
                            } }, { children: "Rename" })), _jsx(Divider, { my: "8px" }), !bannedComponents.has(component.componentID) &&
                            component.metadata &&
                            component.metadata.layout && (_jsx(MenuItem, Object.assign({ onClick: () => onRemoveFromLayout(component.id) }, { children: "Remove from layout" }))), _jsx(MenuItem, Object.assign({ verticalAlign: "middle", alignItems: "center", onClick: handleRemoveComponent, color: "red.500", icon: _jsx(Icon, { as: iconsList["Delete"], color: "red.500", transform: "translateY(3px)" }) }, { children: "Delete" }))] }) })] })));
});
const PageMenu = ({ onDragEnd, onBlurRenameItem, onStateChange, onSetActiveComponent, onRemoveComponent, components, componentToEditID, activeComponent, renderLayoutComponentsMenu, layer1, onMoveToLayout, onRemoveFromLayout, }) => {
    const { isOpen, onClose, onOpen } = useDisclosure();
    const editorActions = EditorContext.useActions();
    const availableLayout = React.useMemo(() => {
        return components.filter((component) => isComponent(component, "ColumnLayout2") ||
            isComponent(component, "ColumnLayout3"));
    }, [components]);
    const handleRenameComponent = React.useCallback((e) => {
        if (e.key === "Enter") {
            e.currentTarget.blur();
        }
    }, []);
    const handleStopPropagation = React.useCallback((e) => {
        e.stopPropagation();
    }, []);
    const rightPanel = EditorContext.useSelectState(({ rightPanel }) => rightPanel);
    return (_jsx(DragDropContext, Object.assign({ onDragEnd: onDragEnd }, { children: _jsx(Droppable, Object.assign({ droppableId: "components", direction: "vertical" }, { children: (provided) => (_jsxs(Scrollbars, { children: [_jsxs(Box, Object.assign({}, provided.droppableProps, { ref: provided.innerRef }, { children: [components.map((comp, index) => {
                                var _a;
                                return comp.id === componentToEditID ? (_jsx(Box, Object.assign({ css: css `
                      margin: 5px 16px;
                      padding: 4px 12px;
                      border-radius: 4px;
                      cursor: pointer;
                    ` }, { children: _jsx(Input, { autoFocus: true, defaultValue: ((_a = comp.metadata) === null || _a === void 0 ? void 0 : _a.name) || comp.componentID, onBlur: (e) => onBlurRenameItem(e, comp.id), onKeyDown: handleRenameComponent }) }))) : (_jsx(Draggable, Object.assign({ draggableId: comp.id, index: index }, { children: (provided) => {
                                        var _a, _b;
                                        return (_jsxs(Box, Object.assign({ ref: provided.innerRef }, provided.draggableProps, { children: [_jsxs(Flex, Object.assign({ css: css `
                            margin: 5px 16px;
                            padding: 4px 12px;
                            border-radius: 4px;
                            cursor: pointer;
                            &:hover {
                              background-color: #eff4fb;
                            }
                            ${activeComponent === comp.id &&
                                                        rightPanel.type === "component"
                                                        ? `#component-reveal-menu {
                                  opacity: 1;
                                }`
                                                        : `
                                #component-reveal-menu {
                                  transition: opacity 200ms ease;
                                  opacity: 0;
                                }`}
                            &:hover #component-reveal-menu {
                              opacity: 1;
                            }
                          `, alignItems: "center", onClick: () => {
                                                        onSetActiveComponent(comp.id);
                                                        editorActions.setRightPanel({
                                                            type: "component",
                                                            id: comp.id,
                                                        });
                                                    }, bg: activeComponent === comp.id &&
                                                        rightPanel.type === "component"
                                                        ? "#E6F0FF"
                                                        : undefined }, { children: [_jsxs(HStack, { children: [_jsx(Box, Object.assign({}, provided.dragHandleProps, { children: _jsx(Icon, { color: "gray.400", as: iconsList["Drag"] }) })), _jsx(Icon, { as: iconsList[(_a = getComponent(comp.componentID)) === null || _a === void 0 ? void 0 : _a.id] }), _jsx(Text, Object.assign({ color: activeComponent === comp.id &&
                                                                        rightPanel.type === "component"
                                                                        ? "#004DC4"
                                                                        : "#001E4D", onDoubleClick: (e) => {
                                                                        e.stopPropagation();
                                                                        onStateChange((state) => produce(state, (draft) => {
                                                                            draft.componentBeingEdit = comp.id;
                                                                        }));
                                                                        return false;
                                                                    } }, { children: ((_b = comp.metadata) === null || _b === void 0 ? void 0 : _b.name) || comp.componentID }))] }), _jsx(Spacer, {}), comp.id !== "login_component" && (_jsxs(Box, Object.assign({ display: "flex", alignItems: "center", onClick: handleStopPropagation }, { children: [!!comp.metadata && !!comp.metadata.layout && (_jsxs(Text, { children: ["Col-", comp.metadata.layout.column] })), _jsx("div", Object.assign({ id: "component-reveal-menu" }, { children: _jsx(MenuOptions, { component: comp, index: index, onRemoveComponent: onRemoveComponent, onStateChange: onStateChange, onMoveToLayout: onMoveToLayout, onRemoveFromLayout: onRemoveFromLayout, isOpen: isOpen, activeComponent: activeComponent, availableLayout: availableLayout, layer1: layer1 }) }))] })))] })), renderLayoutComponentsMenu &&
                                                    comp.id in renderLayoutComponentsMenu && (_jsx(Box, Object.assign({ ml: "4" }, { children: renderLayoutComponentsMenu[comp.id] })))] })));
                                    } }), comp.id));
                            }), provided.placeholder] })), _jsx(Spacer, { h: "32" })] })) })) })));
};
export default React.memo(PageMenu);
//# sourceMappingURL=PageMenuItem.js.map