import React, { useEffect } 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 { useDeleteMasterMutation } from '../../__data__/service/api';

interface MasterActionsMenu {
  id: string;
}

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

  const [deleteMaster, { isSuccess, isError, error, isLoading }] =
    useDeleteMasterMutation();

  const toast = useToast();

  const handleClickDelete = async () => {
    await deleteMaster({ id });
  };

  useEffect(() => {
    if (isSuccess) {
      toast({
        title: 'Мастер удалён.',
        description: `Мастер с ID "${id}" успешно удалён.`,
        status: 'success',
        duration: 5000,
        isClosable: true,
        position: 'top-right',
      });
    }
  }, [isSuccess]);

  useEffect(() => {
    if (isError) {
      toast({
        title: 'Ошибка удаления мастера.',
        description: 'Не удалось удалить мастера. Попробуйте ещё раз.',
        status: 'error',
        duration: 5000,
        isClosable: true,
        position: 'top-right',
      });
      console.error(error);
    }
  }, [isError]);

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

export default MasterActionsMenu;