import React, { FC, useCallback } from 'react';
import { Input, InputProps } from '../../../molecules/Input';
import { Form, useIterableSignUp } from '../../../utils/hooks/useIterableForm';
import { cssMerge } from '../../../utils/cssMerge';

interface NewsletterSignUpProps extends InputProps {
  formId: string;
  submitError?: string;
  emailError?: string;
  successMessage?: string;
}

export const NewsletterSignUp: FC<NewsletterSignUpProps> = ({
  formId,
  className,
  size = 'md',
  button = {
    hierarchy: 'secondary',
    label: 'Sign Up',
  },
  emailError = 'Please enter a valid email address',
  submitError = 'Something went wrong, please try again',
  successMessage = 'Success! Thank you for signing up!',
  ...props
}) => {
  const { actionUrl, onSubmit, error, onValueChange, values, setError, isSuccess } = useIterableSignUp({
    formId,
  });
  const validate = useCallback(() => {
    const veryBasicEmailCheck = new RegExp('[a-z0-9]+@[a-z]+.[a-z]{2,3}');
    if (values.email && !veryBasicEmailCheck.test(values.email)) {
      setError({ email: emailError });
    }
  }, [values.email]);
  const success = isSuccess && successMessage;

  return (
    <Form action={actionUrl} onSubmit={e => onSubmit(e, { submitError })}>
      <Input
        size={size}
        name="email"
        className={cssMerge('tw-w-full sm:tw-w-fit', className)}
        button={button}
        helperText={error.submission || error.email || success}
        onChange={onValueChange}
        error={!!error.submission || !!error.email}
        onBlur={validate}
        {...props}
      />
    </Form>
  );
};
