import { jsx, jsxs } from "react/jsx-runtime";
import ArrowRight from "@mui/icons-material/ArrowRight";
import { Divider, ListItemText, Menu, MenuItem } from "@mui/material";
import { FontVariantToken, Padding } from "@uipath/apollo-core";
import react, { useCallback, useMemo, useState } from "react";
import { ApTypography } from "../ap-typography/index.js";
import { debugItems } from "./constants.js";
const anchorOriginDefault = {
    vertical: 'bottom',
    horizontal: 'left'
};
const transformOriginDefault = {
    vertical: 'top',
    horizontal: 'left'
};
function ApMenu(props) {
    const { menuItems, onClose, anchorEl, maxHeight, width = 246, dontUseInternalOnlyDebugMode, anchorOrigin = anchorOriginDefault, transformOrigin = transformOriginDefault, slotProps } = props;
    const [openMenus, setOpenMenus] = useState(new Set());
    const [submenuAnchors, setSubmenuAnchors] = useState({});
    const mergedSlotProps = useMemo(()=>{
        const defaultPaperSx = {
            maxHeight,
            width
        };
        if (!slotProps) return {
            paper: {
                sx: defaultPaperSx
            }
        };
        if (!slotProps.paper) return {
            ...slotProps,
            paper: {
                sx: defaultPaperSx
            }
        };
        if ('function' == typeof slotProps.paper) {
            const paperFn = slotProps.paper;
            return {
                ...slotProps,
                paper: (ownerState)=>{
                    const userPaperProps = paperFn(ownerState);
                    return {
                        ...userPaperProps,
                        sx: [
                            defaultPaperSx,
                            userPaperProps?.sx
                        ].filter((sx)=>null != sx)
                    };
                }
            };
        }
        return {
            ...slotProps,
            paper: {
                ...slotProps.paper,
                sx: [
                    defaultPaperSx,
                    slotProps.paper?.sx
                ].filter((sx)=>null != sx)
            }
        };
    }, [
        slotProps,
        maxHeight,
        width
    ]);
    const handleMenuToggle = useCallback((title, anchor)=>{
        setOpenMenus((prev)=>{
            const newOpenMenus = new Set(prev);
            if (newOpenMenus.has(title)) {
                newOpenMenus.delete(title);
                if (anchor) setSubmenuAnchors((prevAnchors)=>({
                        ...prevAnchors,
                        [title]: null
                    }));
            } else {
                newOpenMenus.add(title);
                if (anchor) setSubmenuAnchors((prevAnchors)=>({
                        ...prevAnchors,
                        [title]: anchor
                    }));
            }
            return newOpenMenus;
        });
    }, [
        setOpenMenus,
        setSubmenuAnchors
    ]);
    const renderSubMenu = useCallback((item)=>{
        const anchor = submenuAnchors[item.title ?? ''];
        if (!item.subItems || !anchor) return null;
        return /*#__PURE__*/ jsx(Menu, {
            anchorEl: anchor,
            open: openMenus.has(item.title ?? ''),
            onClose: ()=>handleMenuToggle(item.title ?? ''),
            slotProps: {
                paper: {
                    style: {
                        maxHeight,
                        width,
                        marginLeft: width,
                        marginTop: -32
                    }
                }
            },
            children: item.subItems.map((subItem, index)=>/*#__PURE__*/ jsxs(react.Fragment, {
                    children: [
                        /*#__PURE__*/ jsxs(MenuItem, {
                            onClick: subItem.subItems ? (event)=>{
                                event.stopPropagation();
                                handleMenuToggle(subItem.title ?? '', event.currentTarget);
                            } : subItem.onClick,
                            disabled: subItem.disabled,
                            sx: {
                                minHeight: subItem.subtitle ? '64px !important' : '32px !important'
                            },
                            children: [
                                subItem.startIcon,
                                /*#__PURE__*/ jsx(ListItemText, {
                                    primary: /*#__PURE__*/ jsx(ApTypography, {
                                        variant: FontVariantToken.fontSizeM,
                                        color: "var(--color-foreground)",
                                        style: subItem.subtitle ? {
                                            marginBottom: 4
                                        } : void 0,
                                        children: subItem.title
                                    }),
                                    secondary: subItem.subtitle ? /*#__PURE__*/ jsx(ApTypography, {
                                        variant: FontVariantToken.fontSizeS,
                                        color: "var(--color-foreground-de-emp)",
                                        children: subItem.subtitle
                                    }) : void 0
                                }),
                                subItem.subItems && /*#__PURE__*/ jsx(ArrowRight, {
                                    sx: {
                                        marginLeft: Padding.PadS,
                                        width: 16
                                    }
                                })
                            ]
                        }),
                        subItem.subItems && renderSubMenu(subItem)
                    ]
                }, index))
        });
    }, [
        handleMenuToggle,
        maxHeight,
        openMenus,
        submenuAnchors,
        width
    ]);
    return /*#__PURE__*/ jsx(Menu, {
        anchorEl: anchorEl,
        open: props.isOpen,
        onClose: onClose,
        slotProps: mergedSlotProps,
        anchorOrigin: anchorOrigin,
        transformOrigin: transformOrigin,
        children: (dontUseInternalOnlyDebugMode ? debugItems : menuItems).map((item, index)=>{
            if ('section' === item.variant) return /*#__PURE__*/ jsx("div", {
                style: {
                    display: 'flex',
                    alignItems: 'center',
                    paddingLeft: Padding.PadXxxl,
                    paddingRight: Padding.PadL,
                    height: '32px'
                },
                children: /*#__PURE__*/ jsx(ApTypography, {
                    variant: FontVariantToken.fontSizeMBold,
                    children: item.title
                })
            }, index);
            if ('separator' === item.variant) return /*#__PURE__*/ jsx(Divider, {
                sx: {
                    marginLeft: Padding.PadL,
                    marginRight: Padding.PadL
                }
            }, index);
            const hasSubItems = item.subItems && item.subItems.length > 0;
            return /*#__PURE__*/ jsxs(react.Fragment, {
                children: [
                    /*#__PURE__*/ jsxs(MenuItem, {
                        tabIndex: 0,
                        sx: {
                            display: 'flex',
                            alignItems: 'center',
                            paddingLeft: Padding.PadXxxl,
                            paddingRight: Padding.PadL,
                            minHeight: item.subtitle ? '64px !important' : '32px !important',
                            height: '32px',
                            ...item.isSelected && {
                                backgroundColor: 'var(--color-background-selected) !important',
                                boxShadow: 'inset 4px 0px 0px var(--color-selection-indicator)'
                            }
                        },
                        onClick: (event)=>{
                            if (item.onClick) item.onClick();
                            if (item.subItems) handleMenuToggle(item.title ?? '', event.currentTarget);
                        },
                        disabled: item.disabled,
                        children: [
                            item.startIcon && /*#__PURE__*/ jsx("span", {
                                style: {
                                    marginRight: Padding.PadL,
                                    display: 'flex'
                                },
                                children: item.startIcon
                            }),
                            /*#__PURE__*/ jsx(ListItemText, {
                                primary: /*#__PURE__*/ jsx(ApTypography, {
                                    variant: FontVariantToken.fontSizeM,
                                    color: "var(--color-foreground)",
                                    style: item.subtitle ? {
                                        marginBottom: 4
                                    } : void 0,
                                    children: item.title
                                }),
                                secondary: item.subtitle ? /*#__PURE__*/ jsx(ApTypography, {
                                    variant: FontVariantToken.fontSizeS,
                                    color: "var(--color-foreground-de-emp)",
                                    children: item.subtitle
                                }) : void 0
                            }),
                            item.endIcon,
                            hasSubItems && /*#__PURE__*/ jsx(ArrowRight, {
                                sx: {
                                    marginLeft: Padding.PadS,
                                    width: 16
                                }
                            })
                        ]
                    }),
                    hasSubItems && renderSubMenu(item)
                ]
            }, index);
        })
    });
}
export { ApMenu };
