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 changeEmailForm from 'components/forms/ChangeEmailForm';
import changePasswordForm from 'components/forms/ChangePasswordForm';
import AccountStructure from 'components/structure/AccountStructure';
import styleIdentifiers from './settings.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type SettingsProps = StateProps & DispatchProps & OwnProps;

const Settings = (props: SettingsProps) => {
  const { changeEmail, changePassword, changePasswordValidation, history } = props;

  const dispatch = useDispatch();

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

  const resetEmail = email => {
    dispatch(
      accountActions.changeEmail.request.action({
        data: email,
        // callback: res => {
        //   console.log('res', res);
        //   history.push(pushRoute('settings'));
        // },
        success: 'forms.settings.successEmail',
      }),
    );
  };
  const resetPassword = password => {
    dispatch(
      accountActions.changePassword.request.action({
        data: password,
        changePassword,
        changePasswordValidation,
        // callback: res => {
        //   console.log('res', res);
        //   history.push(pushRoute('settings'));
        // },
        success: 'forms.settings.successPassword ',
      }),
    );
  };
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  // Allow to dispatch actions

  return (
    <AccountStructure title="pages.account.settings" className={styles('settings')}>
      <div className={styles('subtitle')}>
        <TextItem path="forms.settings.changeMail" />
      </div>
      <Form
        component={changeEmailForm}
        onSubmit={resetEmail}
        customClassName={styles('email-reset-form')}
        initialValues={{ newEmail: profile.email }}
      />
      <div className={styles('subtitle')}>
        <TextItem path="forms.settings.changePassword" />
      </div>
      <Form
        component={changePasswordForm}
        onSubmit={resetPassword}
        customClassName={styles('password-reset-form')}
      />
    </AccountStructure>
  );
};

export default Settings;
