import React, { useReducer } from 'react';
import { validateEmail } from '../utils/Helpers';
import classnames from 'classnames';
import './EmailSignup.scss';

interface Props {
  gender: string;
}

interface State {
  email: string;
  selectedGender: string;
  error: string;
}

type Action =
  | { type: 'ChangeEmail'; email: string }
  | { type: 'ChangeGender'; gender: string }
  | { type: 'SetError'; error: string };

export const EmailSignup = (props: Props) => {
  const initialState: State = {
    email: '',
    selectedGender: props.gender,
    error: '',
  };

  const reducer = (state: State, action: Action) => {
    switch (action.type) {
      case 'ChangeEmail':
        if (validateEmail(action.email)) {
          return { ...state, email: action.email, error: '' };
        } else {
          return { ...state, email: action.email };
        }
      case 'ChangeGender':
        return { ...state, gender: action.gender };
      case 'SetError':
        return { ...state, error: action.error };
    }
  };

  const [state, dispatch] = useReducer(reducer, initialState);

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (validateEmail(state.email)) {
      dispatch({ type: 'ChangeEmail', email: '' });
      /* TODO: POST email and gender to signup endpoint */
    } else {
      dispatch({
        type: 'SetError',
        error: 'Email is  invalid. Please enter a valid email.',
      });
    }
  };

  return (
    <div
      className="email-signup"
      onClick={() =>
        state.error !== '' && dispatch({ type: 'SetError', error: '' })
      }
    >
      <div className="mo-fs-sans-bold hidden-mobile">
        Join our list for daily style inspiration & first access to global
        fashion.
      </div>
      <form onSubmit={handleSubmit}>
        <div className="gender-selection">
          <span
            onClick={() => dispatch({ type: 'ChangeGender', gender: 'women' })}
          >
            <input
              type="radio"
              value="women"
              name="women"
              checked={state.selectedGender === 'women'}
            />
            <label htmlFor="women">Womenswear</label>
          </span>
          <span
            onClick={() => dispatch({ type: 'ChangeGender', gender: 'men' })}
          >
            <input
              type="radio"
              value="men"
              name="men"
              checked={state.selectedGender === 'men'}
            />
            <label htmlFor="men">Menswear</label>
          </span>
        </div>
        <input
          className={classnames(
            'newsletter-email-input',
            'mo-fs-sans',
            'fs--xs',
            'medium-12',
            { error: state.error !== '' },
          )}
          placeholder="Sign Up For Our Newsletter"
          value={state.email}
          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
            dispatch({ type: 'ChangeEmail', email: event.target.value })
          }
        />
        <input
          type="submit"
          className="submit-button color-gold-01"
          value=">"
        />
      </form>
      <div
        className={classnames('email-signup__error', {
          hide: state.error === '',
        })}
      >
        <i className="mo-display-icon-exclamation-circle" />
        {state.error}
      </div>
      <div className="email-signup__opt-out fs--xxs">
        To opt-out of email sharing or to view our privacy policy
        <span>
          <a
            className="color-white-01 mo-fs-sans-bold"
            href="/privacy"
            target="_blank"
          >
            click here.
          </a>
        </span>
      </div>
    </div>
  );
};