import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import SignupForm from 'components/forms/SignupForm';
import { Form } from 'react-final-form';
import { NavLink } from 'react-router-dom';
import { fieldComparison } from 'store/utils/validation';
import { useDispatch, useSelector } from 'react-redux';
import account from 'store/account';
import { pushRoute } from 'store/utils/routes';
import ProjectButton from 'components/items/ProjectButton/ProjectButton';
import styleIdentifiers from './signUp.scss';

// assets
import logo from './assets/logo-wf.svg';
import city from './assets/city.png';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type SignUpProps = StateProps & DispatchProps & OwnProps;

const SignUp = (props: SignUpProps) => {
  const { history } = props;

  const lg = useSelector(storeState => storeState.content.lg);

  const dispatch = useDispatch();
  const register = data => dispatch(account.actions.register.request.action(data));
  const afterSignup = data => dispatch(account.actions.afterSignup.action(data));

  const submit = formValues => {
    register({
      data: {
        ...formValues,
        language: lg,
      },
      callback: () => {
        afterSignup({
          data: {
            email: formValues.email,
            password: formValues.password,
          },
        });
      },
    });
  };

  return (
    <div className={styles('Signup')}>
      <div className={styles('signup-wrapper')}>
        <div className={styles('logo-wrapper')}>
          <img src={logo} alt="logo" />
        </div>
        <div className={styles('form-wrapper')}>
          {/* FIRST STEP */}
          <div className={styles('form-step-1')}>
            <Form
              component={SignupForm}
              onSubmit={submit}
              validate={fieldComparison({ field1: 'password', field2: 'passwordConfirmation' })}
            />
          </div>
        </div>
        <div className={styles('links')}>
          <NavLink to={pushRoute('login')} className={styles('link')}>
            <TextItem path="forms.signUp.registered" />
          </NavLink>
        </div>
      </div>

      <img className={styles('bottom-signup')} src={city} alt="city" />
    </div>
  );
};

export default SignUp;
