// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { tokens } from "@coreai-ds/react-components";
import * as React from 'react';
import type { PositioningImperativeRef } from "@coreai-ds/react-components";
import type { MenuProps } from "@coreai-ds/react-components";
import { mergeClasses } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { MenuPopover } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";
const useStyles = makeStyles({
    container: {
        width: '500px',
        height: '400px',
    },
    resizableArea: {
        width: '500px',
        height: '400px',
        position: 'relative',
        border: `2px solid ${tokens.colorBrandBackground}`,
        padding: '20px 10px 10px 10px',
        resize: 'both',
        backgroundImage: `linear-gradient(-45deg, ${tokens.colorBrandBackground} 20px, transparent 20px)`,
        overflow: 'hidden',
        '::after': {
            content: `'Resizable Area'`,
            position: 'absolute',
            padding: '1px 4px 1px',
            top: '-2px',
            left: '-2px',
            fontFamily: 'monospace',
            fontSize: '15px',
            fontWeight: 900,
            lineHeight: 1,
            letterSpacing: '1px',
            color: tokens.colorNeutralForegroundOnBrand,
            backgroundColor: tokens.colorBrandBackground,
        },
    },
});
export const NestedSubmenusResponsiveness = (): JSXElement => {
    const styles = useStyles();
    const [open, setOpen] = React.useState(false);
    const [boundary, setBoundary] = React.useState<HTMLElement | null>(null);
    const positioningRefSubmenu = React.useRef<PositioningImperativeRef>(null);
    const positioningRefRoot = React.useRef<PositioningImperativeRef>(null);
    // Fluent UI handles window resizing by default.
    // Custom boundary resizing is not handled by default.
    React.useEffect(() => {
        if (boundary) {
            const resizeObserver = new ResizeObserver(() => {
                positioningRefSubmenu.current?.updatePosition();
                positioningRefRoot.current?.updatePosition();
            });
            resizeObserver.observe(boundary);
            return () => {
                resizeObserver.unobserve(boundary);
                resizeObserver.disconnect();
            };
        }
    }, [boundary]);
    React.useEffect(() => {
        if (open) {
            // defer position update of the nested menu the root menu hasn't been positioned yet
            const timeout = setTimeout(() => positioningRefSubmenu.current?.updatePosition());
            positioningRefRoot.current?.updatePosition();
            return () => clearTimeout(timeout);
        }
    }, [open]);
    const onOpenChange: MenuProps['onOpenChange'] = (e, data) => {
        if (boundary?.contains(e.target as HTMLElement)) {
            setOpen(true);
        }
        else {
            setOpen(data.open);
        }
    };
    return (<div className={styles.container}>
      <div id="components-menu-menu--nested-submenus-responsiveness-boundary" className={mergeClasses(styles.container, styles.resizableArea)} ref={setBoundary}>
        <Menu open={open} onOpenChange={onOpenChange} positioning={{ positioningRef: positioningRefRoot, overflowBoundary: boundary, flipBoundary: boundary }}>
          <MenuTrigger disableButtonEnhancement>
            <Button style={{ position: 'absolute', left: '40%' }}>Menu</Button>
          </MenuTrigger>

          <MenuPopover>
            <MenuList>
              <MenuItem>New </MenuItem>
              <MenuItem>New Window</MenuItem>
              <MenuItem disabled>Open File</MenuItem>
              <MenuItem>Open Folder</MenuItem>
              <Menu open positioning={{
            overflowBoundary: boundary,
            flipBoundary: boundary,
            positioningRef: positioningRefSubmenu,
        }}>
                <MenuTrigger disableButtonEnhancement>
                  <MenuItem>Toggle menu</MenuItem>
                </MenuTrigger>

                <MenuPopover>
                  <MenuList>
                    <MenuItem>New </MenuItem>
                    <MenuItem>New Window</MenuItem>
                    <MenuItem disabled>Open File</MenuItem>
                    <MenuItem>Open Folder</MenuItem>
                  </MenuList>
                </MenuPopover>
              </Menu>
            </MenuList>
          </MenuPopover>
        </Menu>
      </div>
    </div>);
};

export default NestedSubmenusResponsiveness;