import React, { useEffect, useState } from 'react';
import {
  Button,
  FormControl,
  FormLabel,
  Input,
  Drawer,
  DrawerBody,
  DrawerCloseButton,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerOverlay,
  useToast,
  InputGroup,
  InputLeftElement,
} from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import { PhoneIcon } from '@chakra-ui/icons';

import { api } from '../../__data__/service/api';

const MasterDrawer = ({ isOpen, onClose }) => {
  const [addMaster, { error, isSuccess }] = api.useAddMasterMutation();
  const toast = useToast();

  const [newMaster, setNewMaster] = useState({ name: '', phone: '' });

  const handleSave = async () => {
    const trimMaster = {
      phone: newMaster.phone.trim(),
      name: newMaster.name.trim(),
    };

    if (trimMaster.name === '' || trimMaster.phone === '') {
      return;
    }

    addMaster(trimMaster);
  };

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

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

  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.arm.master.drawer',
  });

  return (
    <Drawer isOpen={isOpen} onClose={onClose} size='md'>
      <DrawerOverlay />
      <DrawerContent>
        <DrawerCloseButton />
        <DrawerHeader>{t('title')}</DrawerHeader>
        <DrawerBody>
          <FormControl mb='4'>
            <FormLabel>{t('inputName.label')}</FormLabel>
            <Input
              // isInvalid
              value={newMaster.name}
              onChange={(e) =>
                setNewMaster({ ...newMaster, name: e.target.value })
              }
              placeholder={t('inputName.placeholder')}
            />
          </FormControl>
          <FormControl>
            <FormLabel>{t('inputPhone.label')}</FormLabel>

            <InputGroup>
              <InputLeftElement pointerEvents='none'>
                <PhoneIcon color='gray.300' />
              </InputLeftElement>
              <Input
                // isInvalid
                value={newMaster.phone}
                onChange={(e) =>
                  setNewMaster({ ...newMaster, phone: e.target.value })
                }
                placeholder={t('inputPhone.placeholder')}
              />
            </InputGroup>
          </FormControl>
        </DrawerBody>
        <DrawerFooter>
          <Button colorScheme='teal' mr={3} onClick={handleSave}>
            {t('button.save')}
          </Button>
          <Button variant='ghost' onClick={onClose}>
            {t('button.cancel')}
          </Button>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
};

export default MasterDrawer;