import React, { useEffect } from 'react';
import { Formik, FormikHelpers, FormikProps } from 'formik';

import { FormControl } from '../../styles/components/shared/FormControl.style';
import { Button } from './Button';
import { FormFeedback } from '../../styles/components/shared/FormFeedback.style';
import NewsletterSchema from '../../utils/schemas/NewsletterSchema';
import getSentryClient from '../../utils/sentry';

interface Props {
  onSubmit: () => void;
}

interface NewsletterProps {
  email: string;
}

const NewsletterForm: React.FC<Props> = ({ onSubmit }) => {
  let mounted = false;
  useEffect(() => {
    mounted = true;
    return () => {
      mounted = false;
    };
  }, []);

  return (
    <Formik
      initialValues={{ email: '' }}
      onSubmit={async (values: NewsletterProps, { setSubmitting }: FormikHelpers<NewsletterProps>) => {
        try {
          onSubmit();
          await fetch(
            `${process.env.MARKETING_DOMAIN}/api/contacts`,
            { method: 'POST', body: JSON.stringify({ email: values.email }) }
          );
        } catch (err) {
          if (err.status) {
            getSentryClient().captureException(new Error(
              `Error subscription newsletter email : ${values.email} | status : ${err.status}`
            ));
          }
        }
        mounted && setSubmitting(false);
      }}
      validationSchema={NewsletterSchema}>
      {(innerProps: FormikProps<NewsletterProps>) => {
        const {
          handleSubmit,
          values,
          handleChange,
          handleBlur,
          errors,
          touched,
          isValid,
          isSubmitting
        } = innerProps;
        return (
          <form onSubmit={handleSubmit}>
            <FormControl>
              <input
                name="email"
                type="email"
                autoComplete="email"
                value={values.email}
                onChange={handleChange}
                onBlur={handleBlur} />
              <label>Mon e-mail</label>
              {touched.email && errors.email && values.email && <FormFeedback className="error" message={errors.email} />}
            </FormControl>
            <Button
              color="white"
              type="submit"
              disabled={isSubmitting || !isValid}>
              Je m'abonne
            </Button>
          </form>
        );
      }}
    </Formik>
  );
};

export default NewsletterForm;