import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import FacebookAuth from 'components/global/FacebookAuth';
import { Form } from 'react-final-form';
import AppLoginForm from 'components/forms/AppLoginForm';
import { NavLink } from 'react-router-dom';
import { pushRoute } from 'store/utils/routes';
import ProjectButton from 'components/items/ProjectButton/ProjectButton';
import WelcomeLogo from 'components/items/WelcomeLogo';
import styleIdentifiers from './login.scss';

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

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type LoginProps = StateProps & DispatchProps & OwnProps;

const Login = (props: LoginProps) => {
  const { login, afterLogin, lg, history } = props;

  const submit = values => {
    login({
      data: values,
      callback: afterLogin,
    });
  };

  return (
    <div className={styles('Login')}>
      <div className={styles('login-wrapper')}>
        <WelcomeLogo />
        <div className={styles('form-wrapper')}>
          <Form component={AppLoginForm} onSubmit={submit} />
          <NavLink to={pushRoute('register', lg)}>
            <ProjectButton label="forms.login.notRegistered" color="primary" />
          </NavLink>
        </div>
        {/* <div className={styles('social-login-wrapper')}>
          <div className={styles('text')}>
            <TextItem path="forms.login.orConnectWith" />
          </div>
          <div className={styles('social-items')}>
            <div className={styles('social-item')}>
              <img src={facebook} alt="facebook" />
            </div>
            <div className={styles('social-item')}>
              <img src={twitter} alt="twitter" />
            </div>
            <div className={styles('social-item')}>
              <img src={google} alt="google" />
            </div>
          </div>
        </div> */}

        <div className={styles('links')}>
          <NavLink to={pushRoute('resetPassword', lg)} className={styles('link')}>
            <TextItem path="forms.login.forgotPassword" />
          </NavLink>
        </div>
      </div>
      <img className={styles('bottom-login')} src={city} alt="city" />
    </div>
  );
};

export default Login;
