import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import ChangePasswordForm from 'components/forms/ChangePasswordForm';
import { Form } from 'react-final-form';
import { config, viewConfig } from 'config/general';
import { fire } from 'store/utils/firebase';
import styleIdentifiers from './changePassword.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ChangePasswordProps = StateProps & DispatchProps & OwnProps;

const ChangePassword = (props: ChangePasswordProps) => {
  const { changePasswordFirebase, changePassword } = props;

  const submitChange = async (values): void => {
    if (config.firebase && fire) {
      changePasswordFirebase({
        currentPassword: values.currentPassword,
        password: values.password,
      });
    } else {
      changePassword({
        data: values,
      });
    }
  };

  return (
    <div className={styles('ChangePassword')}>
      <div className={styles('section')}>
        <h2 className={styles('section-title')}>Change password</h2>
        <Form onSubmit={submitChange} component={ChangePasswordForm} />
      </div>
    </div>
  );
};

export default ChangePassword;
