import PropTypes from 'prop-types';
import React from 'react';
import { reduxForm } from 'redux-form';
import classNames from 'classnames';
import { bindActionCreators } from 'redux';
import { Helmet } from 'react-helmet';
import NewPasswordForm from '../components/NewPasswordForm';
import * as UserActions from '../actions';
import Nav from '../../../components/Nav';

function NewPasswordView(props) {
  const newPasswordClass = classNames({
    'new-password': true,
    'new-password--invalid': props.user.resetPasswordInvalid,
    'form-container': true,
    'user': true
  });
  return (
    <div className="new-password-container">
      <Nav layout="dashboard" />
      <div className={newPasswordClass}>
        <Helmet>
          <title>p5.js Web Editor | New Password</title>
        </Helmet>
        <div className="form-container__content">
          <h2 className="form-container__title">Set a New Password</h2>
          <NewPasswordForm {...props} />
          <p className="new-password__invalid">
            The password reset token is invalid or has expired.
          </p>
        </div>
      </div>
    </div>
  );
}

NewPasswordView.propTypes = {
  params: PropTypes.shape({
    reset_password_token: PropTypes.string,
  }).isRequired,
  validateResetPasswordToken: PropTypes.func.isRequired,
  user: PropTypes.shape({
    resetPasswordInvalid: PropTypes.bool
  }).isRequired
};

function validate(formProps) {
  const errors = {};

  if (!formProps.password) {
    errors.password = 'Please enter a password';
  }
  if (!formProps.confirmPassword) {
    errors.confirmPassword = 'Please enter a password confirmation';
  }

  if (formProps.password !== formProps.confirmPassword) {
    errors.password = 'Passwords must match';
  }

  return errors;
}

function mapStateToProps(state) {
  return {
    user: state.user
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(UserActions, dispatch);
}

export default reduxForm({
  form: 'new-password',
  fields: ['password', 'confirmPassword'],
  validate
}, mapStateToProps, mapDispatchToProps)(NewPasswordView);