import React from 'react';
import { Field } from 'react-final-form';
import classNames from 'classnames/bind';
import ModuleButton from 'components/items/ModuleButton';
import { required, compareTo, composeValidators } from 'store/utils/validation';
import Password from 'components/formItems/Password';
import config, { viewConfig } from 'config/general';
// import styleIdentifiers from './changePasswordForm.scss';

const styles = classNames.bind();

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type ChangePasswordFormProps = StateProps & DispatchProps & OwnProps;

const ChangePasswordForm = (props: ChangePasswordFormProps) => {
  const { handleSubmit, submitting, valid, values, form } = props;

  const checkConfirm = compareTo('new password')(values.password);

  return (
    <form className={styles('ChangePasswordForm')} onSubmit={handleSubmit}>
      <Field
        {...viewConfig.inputProps}
        component={Password}
        name={config.accountOptions.changePassword.currentPassword}
        label="Current password"
        validate={composeValidators(required)}
      />
      <Field
        {...viewConfig.inputProps}
        component={Password}
        name={config.accountOptions.changePassword.password}
        type="email"
        label="New password"
        validate={composeValidators(required)}
      />
      <Field
        {...viewConfig.inputProps}
        component={Password}
        name={config.accountOptions.changePassword.confirmPassword}
        type="email"
        label="Confirm password"
        validate={composeValidators(required, checkConfirm)}
      />
      <ModuleButton
        disabled={submitting || !valid}
        color="primary"
        label="admin.buttons.submit"
        type="submit"
      />
    </form>
  );
};

export default ChangePasswordForm;
