import React from 'react'

import type { Meta, StoryObj } from '@storybook/react'
import { Button, DropDown } from '../components'
import { MenuItem } from '@mui/material'

const meta = {
  title: 'Layout/DropDown',
  component: DropDown,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {},
} satisfies Meta<typeof DropDown>

export default meta

type Story = StoryObj<typeof meta>

export const DropDownlBasic = () => {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
  const open = Boolean(anchorEl)

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget)
  }

  const handleClose = () => {
    setAnchorEl(null)
  }

  return (
    <>
      <Button
        id="basic-button"
        aria-controls={open ? 'basic-menu' : undefined}
        aria-haspopup="true"
        aria-expanded={open ? 'true' : undefined}
        onClick={handleClick}
        color="primary"
        variant="outlined"
      >
        Open DropDown
      </Button>
      {open && (
        <DropDown onClose={handleClose} open anchorEl={anchorEl}>
          <MenuItem onClick={handleClose}>Profile</MenuItem>
          <MenuItem onClick={handleClose}>My account</MenuItem>
          <MenuItem onClick={handleClose}>Logout</MenuItem>
        </DropDown>
      )}
    </>
  )
}

DropDownlBasic.storyName = 'DropDown Basic'