import React, { useEffect, useRef } from 'react';
import { Form, useFormikContext } from 'formik';

const FormWithFocus = props => {
  const formRef = useRef(null);
  const { isSubmitting, isValidating, errors, touched } = useFormikContext();

  useEffect(() => {
    if (isSubmitting && !isValidating) {
      const errorsInForm = formRef.current.querySelectorAll('[data-strapi-field-error]');

      if (errorsInForm.length > 0) {
        const firstError = errorsInForm[0];
        const describingId = firstError.getAttribute('id');
        const formElementInError = formRef.current.querySelector(
          `[aria-describedby="${describingId}"]`
        );

        if (formElementInError) {
          formElementInError.focus();
        }
      }
    }

    if (!isSubmitting && !isValidating && Object.keys(errors).length) {
      const el = document.getElementById('global-form-error');

      if (el) {
        el.focus();
      }
    }
  }, [errors, isSubmitting, isValidating, touched]);

  return <Form ref={formRef} {...props} noValidate />;
};

export default FormWithFocus;
