import React, { useState, useCallback } from 'react';
import { isNull, capitalize, lowerCase } from 'lodash';
import { Input, Button, Form } from 'antd';
import { withFirebase } from 'react-redux-firebase';
import { withRouter, SingletonRouter } from 'next/router';
import firebase from 'firebase';
import { callbackify } from 'util';

// import { CLIENT } from '../../pages/register';

export type RegisterFormProps = {
  role: string | null;
  firebase: firebase.app.App;
  router: SingletonRouter;
};

const RegisterForm: React.FunctionComponent<RegisterFormProps> = props => {
  const { role, firebase, router } = props;
  const { getFieldDecorator } = props.form;
  if (isNull(role)) {
    return null; // renders nothing!
  }

  const [email, setEmail] = useState('adoji92@gmail.com');
  const [password, setPassword] = useState('adjadj1234');
  const [password2, setPassword2] = useState('adjadj1234');
  // const [email, setEmail] = useState('');
  // const [password, setPassword] = useState('');
  // const [password2, setPassword2] = useState('');

  const onChangeBase = (
    setter: React.Dispatch<React.SetStateAction<string>>,
  ) => (event: React.ChangeEvent<HTMLInputElement>) =>
    setter(event.target.value);

  const isValidEmail = (email: string) => true; // TODO: replace dummy
  const isValidPassword = (password: string) => true; // TODO: replace dummy

  const isFormValid = (email: string, password: string, password2: string) =>
    isValidEmail(email) && isValidPassword(password) && password === password2; // TODO: return [boolean, errorCode] to display proper errorCode
  // OR rename to validateForm, then return { isValid: boolean, errorCode: number }

  let confirmDirty = false;
  // let message = '';
  // let message2 = 'Two passwords that you enter is inconsistent!';

  // const handleConfirmBlur = e => {
  //   const value = e.target.value;
  //   confirmDirty = confirmDirty || !!value ;
  // };

  const compareToFirstPassword = (value, callback) => {
    const form = props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('Two passwords that you enter is inconsistent!');
    } else {
      callback();
    }
  };

  const validateToNextPassword = (value, callback) => {
    const form = props.form;
    if (value && confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  };

  const onSubmit = async (email: string, password: string, role: string) => {
    let hasError = false;

    try {
      await firebase.auth().createUserWithEmailAndPassword(email, password);
    } catch (error) {
      // TODO: switch with error.code
      console.error('error', error); // TODO: delete on production build
      hasError = true;
    }

    if (hasError) {
      // NOTE: return in catch clause is anti-pattern
      return;
    }

    try {
      const user = firebase.auth().currentUser;
      if (!isNull(user)) {
        const uid = user.uid;
        const uRole = `${lowerCase(role)}s`;
        await firebase
          .firestore()
          .collection(uRole)
          .doc(uid)
          .set({});
      }
    } catch (error) {
      console.error('error2', error); // TODO: delete on production build
      hasError = true;
    }

    if (hasError) {
      return;
    }

    try {
      const user = firebase.auth().currentUser;
      if (!isNull(user)) {
        await user.sendEmailVerification();
      }
    } catch (error) {
      console.error('error3', error); // TODO: delete on production build
      hasError = true;
    }

    if (hasError) {
      return;
    }

    router.push('/email-verification-required');
  };
  return (
    <div>
      <h1>Register as {capitalize(role)}</h1>
      {/* TODO: refactor to antd.Form */}
      <Form>
        <Form.Item label="E-mail">
          {getFieldDecorator('email', {
            rules: [
              {
                type: 'email',
                message: 'The input is not valid E-mail!',
              },
              {
                required: true,
                message: 'Please input your E-mail!',
              },
            ],
          })
          (<Input
            placeholder="email"
            size="large"
            onChange={onChangeBase(setEmail)}
          />)}
        </Form.Item>
        {/* TODO: add password validation */}
        <Form.Item label="Password" hasFeedback>
          {getFieldDecorator('password', {
            rules: [
              {
                required: true,
                message: 'Please input your password!',
              },
              {
                validator: validateToNextPassword(setPassword, useCallback),
              },
            ],
          })(<Input.Password
            placeholder="password"
            size="large"
            onChange={onChangeBase(setPassword)}
          />)}
        </Form.Item>
        <Form.Item label="Confirm Password" hasFeedback>
          {getFieldDecorator('confirm', {
            rules: [
              {
                required: true,
                message: 'Please confirm your password!',
              },
              {
                validator: compareToFirstPassword(setPassword2, useCallback),
              },
            ],
          })(<Input.Password
            // onBlur={handleConfirmBlur}
            placeholder="password confirmation"
            size="large"
            onChange={onChangeBase(setPassword2)}
          />)}
        </Form.Item>
      </Form>
      <br />
      <br />
      <Button
        type="primary"
        disabled={!isFormValid(email, password, password2)}
        block={true}
        // tslint:disable-next-line jsx-no-lambda
        onClick={evt => {
          evt.preventDefault();
          onSubmit(email, password, role);
        }}
      >
        Register
      </Button>
      email: {email}
      <br />
      pw1: {password}
      <br />
      pw2: {password2}
      <br />
    </div>
  );
};

const WrappedRegisterForm = Form.create({ name: 'register' })(RegisterForm);

// export default RegisterForm;
export default withFirebase(withRouter(WrappedRegisterForm));