import React, { Component } from 'react';
import PropTypes from 'prop-types';

import Button from 'components/buttons/Button';
import Form from 'components/forms/Form';
import formFieldInterface from 'interfaces/form_field';
import InputField from 'components/forms/fields/InputField';

const baseClass = 'change-email-form';

class ChangeEmailForm extends Component {
  static propTypes = {
    fields: PropTypes.shape({
      password: formFieldInterface.isRequired,
    }).isRequired,
    handleSubmit: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired,
  };

  render () {
    const { fields, handleSubmit, onCancel } = this.props;

    return (
      <form onSubmit={handleSubmit}>
        <InputField
          {...fields.password}
          autofocus
          label="Password"
          type="password"
        />
        <div className={`${baseClass}__btn-wrap`}>
          <Button className={`${baseClass}__btn`} type="submit" variant="brand">
            Submit
          </Button>
          <Button onClick={onCancel} variant="inverse" className={`${baseClass}__btn`}>Cancel</Button>
        </div>
      </form>
    );
  }
}

export default Form(ChangeEmailForm, {
  fields: ['password'],
  validate: (formData) => {
    if (!formData.password) {
      return {
        valid: false,
        errors: { password: 'Password must be present' },
      };
    }

    return { valid: true, errors: {} };
  },
});