import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import { Form } from 'react-final-form';
import { NavLink } from 'react-router-dom';

import AppResetPasswordForm from 'components/forms/AppResetPasswordForm';
import { pushRoute } from 'store/utils/routes';
import styleIdentifiers from './resetPassword.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ResetPasswordProps = StateProps & DispatchProps & OwnProps;

const ResetPassword = (props: ResetPasswordProps) => {
  const { reset } = props;
  const submit = values => {
    reset({
      data: values,
      callback: res => {
        console.log('res', res);
      },
      success: 'forms.resetPassword.resetSuccess',
    });
  };

  return (
    <div className={styles('ResetPassword')}>
      <h1>
        <TextItem path="forms.resetPassword.title" />
      </h1>
      <div className={styles('form-wrapper')}>
        <Form component={AppResetPasswordForm} onSubmit={submit} />
      </div>
      <div className={styles('links')}>
        <NavLink to={pushRoute('login')} className={styles('link')}>
          <TextItem path="forms.resetPassword.remember" />
        </NavLink>
      </div>
    </div>
  );
};

export default ResetPassword;
