import React from 'react';
import {
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  IconButton,
  useToast,
} from '@chakra-ui/react';
import { EditIcon } from '@chakra-ui/icons';
import { useTranslation } from 'react-i18next';

import { armService } from '../../api/arm';

interface MasterActionsMenu {
  id: string;
}

const MasterActionsMenu = ({ id }: MasterActionsMenu) => {
  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.arm.master.table.actionsMenu',
  });

  const { deleteMaster } = armService();
  const toast = useToast();

  const handleClickDelete = async () => {
    try {
      await deleteMaster({ id });
      toast({
        title: 'Мастер удалён.',
        description: `Мастер с ID "${id}" успешно удалён.`,
        status: 'success',
        duration: 5000,
        isClosable: true,
        position: 'top-right',
      });
    } catch (error) {
      toast({
        title: 'Ошибка удаления мастера.',
        description: 'Не удалось удалить мастера. Попробуйте ещё раз.',
        status: 'error',
        duration: 5000,
        isClosable: true,
        position: 'top-right',
      });
      console.error(error);
    }
  };

  return (
    <Menu>
      <MenuButton icon={<EditIcon />} as={IconButton} variant='outline' />
      <MenuList>
        <MenuItem onClick={handleClickDelete}>{t('delete')}</MenuItem>
      </MenuList>
    </Menu>
  );
};

export default MasterActionsMenu;