import React, { useCallback, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { TextField, Button, Link as MuiLink } from '@material-ui/core';
import { withRouter, Link } from 'react-router-dom';
import { isEmpty, isEmail } from 'validator';
import { connect } from 'react-redux';
import { useFormField } from 'app-hooks';
import firebase from 'app-firebase';
import { FormBox, ButtonWrapper } from '../shared';

const mapStateToProps = state => ({
  authUser: state.authUser,
});

const LoginBox = ({ history, authUser }) => {
  const [
    { email, password },
    handleFieldChange,
    handleFieldBlur,
    handleFieldFocus,
    validateFieldAfterSubmit,
  ] = useFormField({
    email: {
      value: '',
      validationRules: [
        {
          method: isEmpty,
          validWhen: false,
          errorText: 'This field should not be left empty!',
        },
        {
          method: isEmail,
          errorText: 'This field should contain an email!',
        },
      ],
    },
    password: {
      value: '',
      validationRules: [
        {
          method: isEmpty,
          validWhen: false,
          errorText: 'This field should not be left empty!',
        },
      ],
    },
  });
  const [errorText, setErrorText] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const handleFormSubmit = useCallback(
    async e => {
      e.preventDefault();
      setErrorText('');

      if (!validateFieldAfterSubmit('email', email.value)) return;

      if (!validateFieldAfterSubmit('password', password.value)) return;

      setIsLoading(true);

      try {
        await firebase.auth().signInWithEmailAndPassword(email.value, password.value);
      } catch (err) {
        setIsLoading(false);
        setErrorText(err.message);
      }
    },
    [validateFieldAfterSubmit, email.value, password.value],
  );

  useEffect(() => {
    if (authUser) history.push('/dashboard');
  }, [authUser, history]);

  return (
    <FormBox
      title="Login"
      formLink={
        <MuiLink component={Link} to="/register">
          Haven&#39;t got an account yet? Register!
        </MuiLink>
      }
      isLoading={isLoading}
      onSubmit={handleFormSubmit}
      errorText={errorText}
    >
      <TextField
        label="Email"
        margin="dense"
        variant="outlined"
        name="email"
        value={email.value}
        onChange={handleFieldChange}
        onBlur={handleFieldBlur}
        onFocus={handleFieldFocus}
        fullWidth
        helperText={email.errorText}
        error={!email.isValid}
      />
      <TextField
        label="Password"
        margin="dense"
        variant="outlined"
        name="password"
        type="password"
        value={password.value}
        onChange={handleFieldChange}
        onBlur={handleFieldBlur}
        onFocus={handleFieldFocus}
        fullWidth
        helperText={password.errorText}
        error={!password.isValid}
      />
      <ButtonWrapper dense>
        <Button variant="contained" type="submit" color="primary">
          Submit
        </Button>
      </ButtonWrapper>
    </FormBox>
  );
};

LoginBox.propTypes = {
  /**
   * The authenticated user
   */
  authUser: PropTypes.object,

  /**
   * @ignore
   */
  history: PropTypes.object.isRequired,
};

export default withRouter(connect(mapStateToProps)(LoginBox));