import React, { useState, useEffect } from 'react';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import SignupStep2Form from 'components/forms/SignupStep2Form';
import { Form } from 'react-final-form';
import { NavLink } from 'react-router-dom';
import account from 'store/account';
import { pushRoute } from 'store/utils/routes';
import isEmpty from 'lodash/isEmpty';
import { syncAction } from 'store/utils/actions';
import styleIdentifiers from './signupStep2.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 SignUpStep2Props = StateProps & DispatchProps & OwnProps;

const SignUpStep2 = (props: SignUpStep2Props) => {
  const { history } = props;

  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  const profile = useSelector((state: StoreState) => state.account.profile);
  const redirect = useSelector((state: StoreState) => state.account.redirect);

  // Allow to dispatch actions
  const dispatch = useDispatch();
  const updateProfile = data => dispatch(account.actions.updateProfile.request.action(data));
  const addBillingInfos = data => dispatch(account.actions.addBillingInfos.request.action(data));
  const saveRedirect = syncAction(dispatch, account.actions.saveRedirect.action);

  const handleRedirect = () => {
    if (redirect) {
      saveRedirect(null);
      history.push(redirect);
      return;
    }
    // redirect to home
    history.push(pushRoute('home', lg));
  };

  const handleBillingInfos = billingInfos => {
    if (billingInfos.customTags) billingInfos.customTags = { type: billingInfos.customTags };

    billingInfos.default = true;

    addBillingInfos({
      data: billingInfos,
      callback: handleRedirect,
      success: 'forms.signUp.succes',
    });
  };

  const submit = values => {
    const { billingInfos, ...data } = values;

    // if (values.profile === 'seller') {
    //   data.firstName = billingInfos.firstName;
    //   data.lastName = billingInfos.lastName;
    //   data.address = billingInfos.address;
    // }

    updateProfile({
      data,
      callback: res => {
        // do after
        if (billingInfos && !isEmpty(billingInfos)) {
          handleBillingInfos(billingInfos);
        } else {
          handleRedirect();
        }
      },
      success: (!billingInfos || isEmpty(billingInfos)) && 'forms.signUp.succes',
    });
  };

  const profileData = profile && profile.data;

  return (
    <div className={styles('sign-up-step2')}>
      <div className={styles('signup-wrapper')}>
        <div className={styles('logo-wrapper')}>
          <img src={logo} alt="logo" />
        </div>
        <div className={styles('form-wrapper')}>
          <div className={styles('title', 'text-center', 'dark-blue')}>
            <h1>
              <TextItem path="forms.signUp.welcome" />
            </h1>
          </div>
          <Form
            initialValues={{
              // profile: 'worker',
              ...profileData,
            }}
            component={SignupStep2Form}
            onSubmit={submit}
          />
        </div>
      </div>
      <img className={styles('bottom-signup')} src={city} alt="city" />
    </div>
  );
};

export default SignUpStep2;
