import {
  Button,
  Menu,
  MenuButton,
  MenuItem,
  MenuList,
  useDisclosure,
} from "@chakra-ui/react"
import { BsThreeDotsVertical } from "react-icons/bs"
import { FiEdit, FiTrash } from "react-icons/fi"

import type { ItemPublic, UserPublic, AboutUsPublic, CoursePublic, ImagePublic, SchedulePublic, OrganPublic } from "../../client"
import EditUser from "../Admin/EditUser"
import EditItem from "../Items/EditItem"
import EditCourseImage from "../CourseImage/editCourseImage"
import EditAboutUs from "../AboutUs/EditAboutUs"
import EditSechedule from "../Courses/EditSechedule"
import EditOrgan from "../Organ/EditOrgan"
import Delete from "./DeleteAlert"

interface ActionsMenuProps {
  type: string
  value: ItemPublic | UserPublic | AboutUsPublic | CoursePublic | ImagePublic | SchedulePublic
  disabled?: boolean
}






const ActionsMenu = ({ type, value, disabled }: ActionsMenuProps) => {
  const editUserModal = useDisclosure()
  const deleteModal = useDisclosure()

  const renderEditModel = (type: string) => {
    switch (type) {
      case 'User':
        return (
          <EditUser
            user={value as UserPublic}
            isOpen={editUserModal.isOpen}
            onClose={editUserModal.onClose}
          />
        )
      case 'Item':
        return (
          <EditItem
            item={value as ItemPublic}
            isOpen={editUserModal.isOpen}
            onClose={editUserModal.onClose}
          />
        )
      case 'AboutUs':
        return (
          <EditAboutUs
            aboutUs={value as AboutUsPublic}
            isOpen={editUserModal.isOpen}
            onClose={editUserModal.onClose}
          />
        )
      case 'Organ':
        return (
          <EditOrgan
            organ={value as OrganPublic}
            isOpen={editUserModal.isOpen}
            onClose={editUserModal.onClose}
          />
        )
      case 'Image':
        return (
          <EditCourseImage
            type='Image'
            imageDetails={value as ImagePublic}
            isOpen={editUserModal.isOpen}
            onClose={editUserModal.onClose}
          />
        )
      case 'Info_Image':
        return (
          <EditCourseImage
            type='Info_Image'
            imageDetails={value as ImagePublic}
            isOpen={editUserModal.isOpen}
            onClose={editUserModal.onClose}
          />
        )

      case "Sechedule":
        return (
          <EditSechedule
            type="Sechedule"
            sechedule={value as SchedulePublic}
            isOpen={editUserModal.isOpen}
            onClose={editUserModal.onClose}
          />
        )
      default:
        return null
    }
  }

  return (
    <>
      <Menu>
        <MenuButton
          isDisabled={disabled}
          as={Button}
          rightIcon={<BsThreeDotsVertical />}
          variant="unstyled"
        />
        <MenuList>
          {type === 'Message' ? (<></>) : (<MenuItem
            onClick={editUserModal.onOpen}
            icon={<FiEdit fontSize="16px" />}
          >
            Edit {type}
          </MenuItem>)
          }

          <MenuItem
            onClick={deleteModal.onOpen}
            icon={<FiTrash fontSize="16px" />}
            color="ui.danger"
          >
            Delete {type}
          </MenuItem>
        </MenuList>
        {
          renderEditModel(type)
        }
        <Delete
          type={type}
          id={value.id}
          isOpen={deleteModal.isOpen}
          onClose={deleteModal.onClose}
        />
      </Menu>
    </>
  )
}
export default ActionsMenu
