import { MoreVert } from '@mui/icons-material'
import {
  ButtonProps,
  DialogProps,
  DrawerProps,
  IconButtonProps,
  MenuListProps,
  MenuProps,
} from '@mui/material'
import { ReactNode, useState } from 'react'
import { useImmer } from 'use-immer'
import { CustomDialog } from '../ModalButtons/DialogButton'
import { CustomDrawer } from '../ModalButtons/DrawerButton'
import AnchorElement from './AnchorElement'
import {
  IMenuItemProps,
  MenuItemType,
  RenderMenuItem,
} from './DropdownMenuItem'
import { StyledMenu } from './styles'

interface DropDownButtonProps {
  icon?: {
    icon: ReactNode
    iconProps?: IconButtonProps
    outlined?: boolean
  }
  button?: {
    label?: string
    buttonProps?: ButtonProps
  }
  anchor?: (props: { open: () => void }) => ReactNode
  loading?: boolean
  menu: IMenuItemProps[]
  menuProps?: Omit<MenuProps, 'open'>
  menuListProps?: MenuListProps
}

const defaultIcon = {
  icon: <MoreVert color="primary" />,
  outlined: true,
}

interface IModalState {
  open: boolean
  content: any
  contentTitle: ReactNode
  type: MenuItemType
  props: Omit<DialogProps, 'open'> | Omit<DrawerProps, 'open'>
}

const DropDownButton = ({
  button,
  icon = defaultIcon,
  menu = [],
  menuProps,
  menuListProps,
  loading = false,
  anchor,
}: DropDownButtonProps) => {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
  const [open, setOpen] = useState(false)

  const [modalState, setModalState] = useImmer<IModalState>({
    open: false,
    content: null,
    contentTitle: '',
    type: 'drawer',
    props: null,
  })

  const handleClick = (event: any) => {
    setAnchorEl(event.currentTarget)
    setOpen(true)
  }

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

  const onModalClose = () => {
    setModalState((s) => {
      s.open = false
      s.content = null
    })
  }
  const onModalOpen = (item, props) => {
    setModalState((s) => {
      s.content = item.content
      s.open = true
      s.type = item.actionType
      s.props = props
      s.contentTitle = item?.contentTitle ?? ''
    })
  }

  return (
    <>
      <AnchorElement
        anchor={anchor}
        loading={loading}
        button={button}
        icon={icon}
        handleClick={handleClick}
      />
      <StyledMenu
        elevation={0}
        id="basic-menu"
        anchorEl={anchorEl}
        keepMounted
        open={open}
        onClose={handleClose}
        PaperProps={{
          elevation: 0,
        }}
        MenuListProps={{ ...menuListProps }}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'right',
        }}
        transitionDuration={150}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'right',
        }}
        {...menuProps}
      >
        {menu.map((item, index) => (
          <RenderMenuItem
            key={index}
            onModalOpen={(props) => onModalOpen(item, props)}
            modalState={modalState}
            handleClose={handleClose}
            actionType={item?.actionType}
            {...item}
          />
        ))}
      </StyledMenu>
      {modalState?.open && (
        <RenderContent
          onClose={onModalClose}
          modalState={modalState}
          contentType={modalState.type}
        />
      )}
    </>
  )
}

export default DropDownButton

const RenderContent = ({
  contentType,
  modalState,
  onClose,
}: {
  contentType: MenuItemType
  modalState: any
  onClose: () => void
}) => {
  if (contentType === 'dialog')
    return (
      <CustomDialog
        onClose={onClose}
        open={modalState.open}
        content={modalState.content}
        title={modalState?.contentTitle}
        dialogProps={modalState?.props}
      />
    )

  if (contentType === 'drawer')
    return (
      <CustomDrawer
        onClose={onClose}
        open={modalState.open}
        content={modalState.content}
        title={modalState?.contentTitle}
        drawerProps={modalState?.props}
      />
    )
  return <></>
}
