dry-wash-pl/src/components/MasterDrawer/MasterDrawer.tsx

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

import { api } from '../../__data__/service/api';
import showToast from '../../helpers/showToast';
import { DrawerInputs } from '../../models/arm/form';

interface MasterDrawerProps {
  isOpen: boolean;
  onClose: () => void;
}

const MasterDrawer = ({ isOpen, onClose }: MasterDrawerProps) => {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<DrawerInputs>();

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

  const onSubmit: SubmitHandler<DrawerInputs> = async (data) => {
    const trimMaster = {
      name: data.name.trim(),
      phone: data.phone.trim(),
    };

    const isEmptyFields = trimMaster.name === '' || trimMaster.phone === '';

    if (isEmptyFields) {
      showToast({
        toast,
        title: t('toast.error.base'),
        description: t('toast.error.empty-fields'),
        status: 'error',
      });
      return;
    }

    await addMaster(trimMaster);
  };

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

  useEffect(() => {
    if (isSuccess) {
      showToast({
        toast,
        title: t('toast.create-master'),
        status: 'success',
      });
      reset();
      onClose();
    }
  }, [isSuccess]);

  useEffect(() => {
    if (error) {
      showToast({
        toast,
        title: t('toast.error.create-master'),
        description: t('toast.error.create-master-details'),
        status: 'error',
      });
      console.error(error);
    }
  }, [error]);

  return (
    <Drawer isOpen={isOpen} onClose={onClose} size='md'>
      <DrawerOverlay />
      <DrawerContent>
        <form onSubmit={handleSubmit(onSubmit)}>
          <DrawerCloseButton />
          <DrawerHeader>{t('title')}</DrawerHeader>
          <DrawerBody>
            <FormControl mb='4' isInvalid={!!errors.name}>
              <FormLabel>{t('inputName.label')}</FormLabel>
              <Input
                {...register('name', {
                  required: t('form.name.required'),
                  minLength: {
                    value: 2,
                    message: t('form.name.minLength'),
                  },
                })}
                placeholder={t('inputName.placeholder')}
              />
              <FormErrorMessage>
                {errors.name && errors.name.message}
              </FormErrorMessage>
            </FormControl>
            <FormControl isInvalid={!!errors.phone}>
              <FormLabel>{t('inputPhone.label')}</FormLabel>
              <InputGroup>
                <InputLeftElement pointerEvents='none'>
                  <PhoneIcon color='gray.300' />
                </InputLeftElement>
                <Input
                  {...register('phone', {
                    required: t('form.phone.required'),
                    pattern: {
                      value: /^(\+7|8)\d{10}$/,
                      message: t('form.phone.pattern'),
                    },
                    setValueAs: (value) => value.replace(/[^\d+]/g, ''),
                  })}
                  placeholder={t('inputPhone.placeholder')}
                />
              </InputGroup>
              <FormErrorMessage>
                {errors.phone && errors.phone.message}
              </FormErrorMessage>
            </FormControl>
          </DrawerBody>
          <DrawerFooter>
            <Button colorScheme='teal' mr={3} type='submit'>
              {t('button.save')}
            </Button>
            <Button variant='ghost' onClick={onClose}>
              {t('button.cancel')}
            </Button>
          </DrawerFooter>
        </form>
      </DrawerContent>
    </Drawer>
  );
};

export default MasterDrawer;