import React, { useState, useEffect } from 'react';
import { Form } from 'react-final-form';

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

// Import actions here
import accountActions from 'store/account/actions';

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import ProjectButton from 'components/items/ProjectButton';
import EditPersonalInfoForm from 'components/forms/EditPersonalInfoForm';
import AccountStructure from 'components/structure/AccountStructure';
import styleIdentifiers from './editPersonalInfo.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type EditPersonalInfoProps = StateProps & DispatchProps & OwnProps;

const EditPersonalInfo = (props: EditPersonalInfoProps) => {
  const { history } = props;
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  // Allow to dispatch actions
  const dispatch = useDispatch();

  const profile = useSelector(
    (state: StoreState) => state.account && state.account.profile && state.account.profile.data,
  );

  const handleSubmit = values => {
    console.log('values', values);
    dispatch(
      accountActions.updateProfile.request.action({
        data: values,
        callback: res => {
          history.goBack();
        },
        success: 'forms.profile.success',
      }),
    );
  };

  return (
    <AccountStructure
      title="pages.account.personalInfo"
      rightBack
      className={styles('edit-personal-info')}
    >
      <Form component={EditPersonalInfoForm} initialValues={profile} onSubmit={handleSubmit} />
    </AccountStructure>
  );
};

export default EditPersonalInfo;
