Can I improve this import React from 'react';

import { yupResolver } from '@hookform/resolvers/yup';
import { Grid } from '@material-ui/core';
import { Controller, useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import * as Yup from 'yup';

import { Button, MultiTagSelect, Select, TextField } from 'components/common';
import { routePaths } from 'constants/Routes';
import { onlyNumbersOrUnderscores } from 'constants/Validations';
import { useCatalogueValidationContext } from 'contexts/CatalogueValidationContext';
import { BranchStatus } from 'models/BranchStatus';
import {
  CatalogueValidationIDType,
  CatalogueValidationValues,
} from 'models/catalogueValidationForm';

import './CatalogueValidationForm.scss';

export const CatalogueValidationForm: React.FC = () => {
  const { t } = useTranslation();
  const {
    listStates,
    states,
    listStatesStatus,
    createReport,
    createReportProgressStatus,
    createReportProgressResult,
    catalogueValidationValues,
    setCatalogueValidationValues,
    catalogueValidationReportData,
    deleteCatalogueValidationReportData,
    setCreateReportProgressStatus,
  } = useCatalogueValidationContext();
  const navigate = useNavigate();

  const stateOptions = React.useMemo(
    () =>
      states.map(({ id, name }) => ({
        label: name,
        value: id,
      })),
    [states],
  );

  const idOptions = [
    { label: t('form.idTypeEvent'), value: CatalogueValidationIDType.EVENT },
    { label: t('form.idTypeMarket'), value: CatalogueValidationIDType.MARKET },
  ];

  const {
    control,
    handleSubmit,
    formState: { errors, isValid },
    setValue,
  } = useForm<CatalogueValidationValues>({
    resolver: yupResolver(
      Yup.object().shape({
        idType: Yup.string().required(),
        id: Yup.string()
          .matches(
            onlyNumbersOrUnderscores,
            t('validations.onlyNumbersOrUnderscores'),
          )
          .required(),
        states: Yup.array()
          .of(
            Yup.object().shape({
              value: Yup.string(),
              label: Yup.string(),
            }),
          )
          .min(1),
      }),
    ),
    mode: 'onChange',
  });

  React.useEffect(() => void listStates(), [listStates]);

  React.useEffect(() => {
    const validationKeys =
      catalogueValidationReportData?.verifications.map(
        (verification) => verification.locale,
      ) || [];
    const matchingStates = states
      .filter((state) => validationKeys.includes(state.id))
      .map(({ name: label, id: value }) => ({ label, value }));

    if (matchingStates.length > 0 && catalogueValidationReportData?.entity) {
      setValue('idType', catalogueValidationReportData.entity.toLowerCase());
      setValue('id', catalogueValidationReportData.id);
      setValue('states', matchingStates);

      deleteCatalogueValidationReportData();
    }
  }, [
    states,
    setValue,
    catalogueValidationValues.states,
    catalogueValidationReportData?.entity,
    catalogueValidationReportData?.id,
    catalogueValidationReportData?.verifications,
    deleteCatalogueValidationReportData,
  ]);

  React.useEffect(() => {
    if (
      createReportProgressStatus === BranchStatus.FINISHED &&
      createReportProgressResult.reportId
    ) {
      setCreateReportProgressStatus(BranchStatus.IDLE);
      navigate(
        `${routePaths.catalogueValidation.reportPath}/${createReportProgressResult.reportId}`,
      );
    }
  }, [
    createReportProgressResult.reportId,
    createReportProgressStatus,
    navigate,
    setCreateReportProgressStatus,
  ]);

  const onSubmit = (formValues: CatalogueValidationValues) => {
    setCatalogueValidationValues(catalogueValidationValues);

    createReport(
      {
        id: formValues.id,
        locales: formValues.states.map((state) => state.value),
      },
      formValues.idType,
    );
  };

  return (
    <form className="catalog-validation-form" onSubmit={handleSubmit(onSubmit)}>
      <div className="catalog-validation-form__section">
        <Grid container spacing={2}>
          <Grid item md={6} xs={12}>
            <Controller
              name="idType"
              control={control}
              defaultValue={catalogueValidationValues.idType}
              render={({ onChange, value, name }) => (
                <Select
                  placeholder={t('form.idTypePlaceholder')}
                  label={t('form.idTypeLabel')}
                  onChange={onChange}
                  value={value}
                  className="catalog-validation-form__field"
                  name={name}
                  options={idOptions}
                />
              )}
            />
          </Grid>
          <Grid item md={6} xs={12}>
            <Controller
              name="id"
              control={control}
              defaultValue={catalogueValidationValues.id}
              render={({ onChange, value, name }) => (
                <TextField
                  placeholder={t('form.idPlaceholder')}
                  label={t('form.idLabel')}
                  onChange={onChange}
                  className="catalog-validation-form__field"
                  value={value}
                  name={name}
                  error={!!errors.id}
                  helperText={errors.id?.message}
                />
              )}
            />
          </Grid>
          <Grid item xs={12}>
            <Controller
              name="states"
              control={control}
              defaultValue={catalogueValidationValues.states}
              render={({ onChange, value }) => (
                <MultiTagSelect
                  id="statePicker"
                  onChange={onChange}
                  className="catalog-validation-form__field"
                  loading={listStatesStatus === BranchStatus.LOADING}
                  disabled={listStatesStatus === BranchStatus.LOADING}
                  options={stateOptions}
                  placeholder={t('form.statePlaceholder')}
                  label={t('common.form.states')}
                  hasSelectAll
                  value={value}
                />
              )}
            />
          </Grid>
        </Grid>
      </div>
      <Button
        type="submit"
        buttonColor="positive"
        loading={createReportProgressStatus === BranchStatus.LOADING}
        progress={createReportProgressResult.progress * 100}
        disabled={
          !(
            (control.getValues('idType') &&
              control.getValues('id') &&
              control.getValues('states').length > 0) ||
            isValid
          )
        }
      >
        {t('common.cta.submit')}
      </Button>
    </form>
  );
};
so that I don't have to do this         disabled={
          !(
            (control.getValues('idType') &&
              control.getValues('id') &&
              control.getValues('states').length > 0) ||
            isValid
          )
        }