
import { FC, useContext } from "react"
import { useTranslation } from "react-i18next"
// import store from "@/store"
import MoreVertIcon from '@mui/icons-material/MoreVert';
import { CopyManager } from "@/utils/copyManager"
import { ShortCutContext } from "@/utils/shortcut/shortcutProvider"
import { MoreActionProps } from "./interface"
import { DropList, DropListItem, Dropdown } from "@/utils/DropDown"

export const MoreAction: FC<MoreActionProps> = (
  props
) => {
  const { displayName, actionType } = props
  const { t } = useTranslation()
  const shortcut = useContext(ShortCutContext)

  const handleClickDelete = () => {
    shortcut.showDeleteDialog([displayName], actionType)
  }

  const handleClickCopy = () => {
    switch (actionType) {
     
      case "widget": {
        CopyManager.copyComponentNodeByDisplayName([displayName])
        CopyManager.paste("duplicate")
        break
      }
    }
  }

  return (
    <Dropdown
      dropList={
        <DropList
        //  w="200px"
         >
          <DropListItem
            value="duplicate"
            title={t("editor.action.action_list.contextMenu.duplicate")}
            onClick={handleClickCopy}
          />
          <DropListItem
            value="delete"
            title={
              t("editor.action.action_list.contextMenu.delete")
            }
            deleted
            onClick={handleClickDelete}
          />
        </DropList>
      }
    >
      <MoreVertIcon sx={{color:"gray",fontSize:"12px"}}/>
    </Dropdown>
  )
}
