// 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 { MenuList } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { MenuPopover } from "@coreai-ds/react-components";
import * as React from 'react';

const useMenuListContainerStyles = makeStyles({
    container: {
        backgroundColor: tokens.colorNeutralBackground1,
        minWidth: '128px',
        minHeight: '48px',
        maxWidth: '300px',
        width: 'max-content',
        boxShadow: `${tokens.shadow16}`,
        paddingTop: '4px',
        paddingBottom: '4px',
    },
});

export const MenuListWithNestedSubmenus = (): JSXElement => {
    const styles = useMenuListContainerStyles();
    return (<div className={styles.container}>
      <MenuList>
        <MenuItem>Cut</MenuItem>
        <MenuItem>Paste</MenuItem>
        <MenuItem>Edit</MenuItem>
        <Menu>
          <MenuTrigger disableButtonEnhancement>
            <MenuItem>Preferences</MenuItem>
          </MenuTrigger>
          <MenuPopover>
            <MenuList>
              <MenuItem>Cut</MenuItem>
              <MenuItem>Paste</MenuItem>
              <MenuItem>Edit</MenuItem>
            </MenuList>
          </MenuPopover>
        </Menu>
      </MenuList>
    </div>);
};

export default MenuListWithNestedSubmenus;