import React, { useEffect, useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
import { useFormik } from 'formik';
import { login } from './service';
import { useCustomerData, useMultiCartData, useTranslation } from './app-state';
import { createRegistrationUrl } from './routes';
import { createBrowserHistory } from "history";

import './LoginForm.scss';

interface LoginFormProps {
  handleModalClose?: (...args: any[]) => any,
  onSubmit?: (...args: any[]) => any,
  handleCloseCartModal?: (...args: any[]) => any,
  openCartModal?: (...args: any[]) => any,
  openModal?: boolean,
  createCart?: boolean,
  handleShowNewCart?: (arg:boolean) => void,
}

interface FormValues {
  emailField: string,
  passwordField: string,
}

export const LoginForm: React.FC<LoginFormProps> = (props) => {
  const { handleModalClose,openCartModal, onSubmit, openModal, createCart, handleCloseCartModal, handleShowNewCart } = props;
  const { setCustomerData } = useCustomerData();
  const { t } = useTranslation();
  const { setGuestCartId, setIsCreateNewCart, createDefaultCart  } = useMultiCartData();

  const registrationUrl = createRegistrationUrl();

  const browserHistory = createBrowserHistory();
  const history = useHistory();

  const [failedLogin, setFailedLogin] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const initialValues:FormValues = {
    emailField: '',
    passwordField: '',
  };

  const validate = (values:any) => {
    const errors:any = {};
    if (!values.emailField) {
      errors.emailField = t('required');
    }
    if (!values.passwordField) {
      errors.passwordField = t('required');
    }

    return errors;
  };

  const {handleSubmit, handleChange, resetForm, values, errors} = useFormik({
    initialValues,
    validate,
    onSubmit: async (values) => {
      const cartId = localStorage.getItem('mcart') || '';
      setGuestCartId(cartId);
      setIsLoading(true);
      login(values.emailField.toLowerCase(), values.passwordField)
        .then((result) => {
          setCustomerData(result.token, result.customer_id);
          setIsLoading(false);
          createDefaultCart();
          if(browserHistory.location.pathname === "/registration")
          {
            history.push('/');
          }
          if (handleModalClose) {
            handleModalClose();
          }
          if(openCartModal && handleShowNewCart){
              openCartModal();
              handleShowNewCart(true);
          }
          if (createCart) {
            setIsCreateNewCart(true);
          }
          if (onSubmit) {
            onSubmit();
          }
        })
        .catch(error => {
          setIsLoading(false);
          setFailedLogin(true);
          console.error(error);
        });
    },
  });

  const registerNewUser = () => {
    if (handleModalClose) {
      handleModalClose();
    }
    if (handleCloseCartModal) {
      handleCloseCartModal();
    }
  };

  useEffect(() => {
    if (!openModal) {
      setFailedLogin(false);
      resetForm();
    }
  }, [openModal, resetForm]);

  return (
    <div className={`loginform${isLoading ? ' --loading' : ''}`}>
      {
        (isLoading) ? <div className="epminiLoader --centered" /> : ('')
      }
      <div className="loginform__feedback">
        {failedLogin ? t('invalid-email-or-password') : ('')}
      </div>
      <form className="epform" id="login_modal_form" onSubmit={handleSubmit}>
        <div className={`epform__group ${errors.emailField ? '--error' : ''}`}>
          <label className="epform__label" htmlFor="emailField">
            {t('email')}:
          </label>
          <input className="epform__input" id="emailField" type="text" onChange={handleChange} value={values.emailField} />
          <div className="epform__error">
            {errors.emailField ? errors.emailField : null}
          </div>
        </div>
        <div className={`epform__group ${errors.passwordField ? '--error' : ''}`}>
          <label className="epform__label" htmlFor="passwordField">
            {t('password')}:
          </label>
          <input className="epform__input" id="passwordField" type="password" onChange={handleChange} value={values.passwordField} />
          <div className="epform__error">
            {errors.passwordField ? errors.passwordField : null}
          </div>
        </div>
        <div className="epform__group --btn-container">
          <button className="epbtn --secondary" id="login_modal_login_button" type="submit" disabled={isLoading}>
            {t('login')}
          </button>
          <Link to={registrationUrl} className="epbtn --secondary" id="login_modal_register_button" onClick={registerNewUser}>
            {t('register')}
          </Link>
        </div>
      </form>
    </div>
  );
};