import { Menu, MenuProps } from "./menu";
import { Button, MenuItem } from "@mui/material";
import { MoreHoriz } from "@mui/icons-material";
import { useState } from "react";

export default {
    title: 'mui-utils/Components/Menu/Component',
    component: Menu,
}

export const Default = (props: MenuProps) => {
    return <Menu { ...props }>
        <MenuItem>Item 1</MenuItem>
        <MenuItem>Item 2</MenuItem>
        <MenuItem>Item 3</MenuItem>
        <MenuItem>Item 4</MenuItem>
    </Menu>
}
export const Open = (props: MenuProps) => {
    return <Menu { ...props } open={ true }>
        <MenuItem>Item 1</MenuItem>
        <MenuItem>Item 2</MenuItem>
        <MenuItem>Item 3</MenuItem>
        <MenuItem>Item 4</MenuItem>
    </Menu>
}

export const CustomIcon = (props: MenuProps) => {
    return <Menu { ...props } icon={ <MoreHoriz/> }>
        <MenuItem>Item 1</MenuItem>
        <MenuItem>Item 2</MenuItem>
        <MenuItem>Item 3</MenuItem>
        <MenuItem>Item 4</MenuItem>
    </Menu>
}

export const CustomTrigger = (props: MenuProps) => {
    const [ open, setOpen ] = useState(false);

    return <Menu { ...props }
        open={ open }
        onClose={ () => setOpen(false) }
        trigger={ <Button onClick={ () => setOpen(true) }>Toggle</Button> }>
        <MenuItem>Item 1</MenuItem>
        <MenuItem>Item 2</MenuItem>
        <MenuItem>Item 3</MenuItem>
        <MenuItem>Item 4</MenuItem>
    </Menu>
}