import React from 'react'
import PropTypes from 'prop-types'
import { Text, Column, BoundInput, BoundButton } from 'ui'
import { MessageModal, WaitModal } from '../Modal'
import { api } from '../helpers'
import { FormBinder } from 'react-form-binder'

export class ResetPassword extends React.Component {
  static propTypes = {
    history: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
  }

  static bindings = {
    newPassword: {
      alwaysGet: true,
      isValid: (r, v) => (v.length >= 6)
    },
    reenteredNewPassword: {
      isValid: (r, v) => (v !== '' && v === r.getField('newPassword').value)
    },
    submit: {
      nonValue: true,
      isDisabled: (r) => (!r.anyModified && !r.allValid)
    }
  }

  constructor(props) {
    super(props)
    this.state = {
      binder: new FormBinder({}, ResetPassword.bindings),
      messageModal: null,
      waitModal: null
    }
    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleMessageModalDismiss = this.handleMessageModalDismiss.bind(this)
  }

  handleSubmit() {
    const obj = this.state.binder.getValues()
    const passwordToken = new URLSearchParams(decodeURIComponent(window.location.search)).get('password-token')

    this.setState({ waitModal: { message: 'Setting Password...' } })
    api.resetPassword({ newPassword: obj.newPassword, passwordToken }).then(() => {
      this.setState({ waitModal: null })
      this.props.history.replace('/login')
    }).catch((error) => {
      this.setState({
        binder: new FormBinder({}, ResetPassword.bindings), // Reset to avoid accidental rapid retries
        waitModal: null,
        messageModal: {
          title: 'We had a problem changing your password',
          message: error.message
        }
      })
    })
  }

  handleMessageModalDismiss() {
    this.setState({ messageModal: null })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <Column>
            <Column.Item>
              <Text size='large'>Reset Password</Text>
            </Column.Item>
            <Column.Item>
              <BoundInput label='New Password' password name='newPassword'
                message='A new password, cannot be blank or the same as your old password'
                width={16} binder={this.state.binder} />
            </Column.Item>
            <Column.Item>
              <BoundInput label='Re-entered New Password' password name='reenteredNewPassword'
                message='The new password again, must match and cannot be blank'
                width={16} binder={this.state.binder} />
            </Column.Item>
            <Column.Item>
              <Text>
                Passwords can contain special characters and should be unique to this application.
                <br /><br />
                Passwords must be at least 6 characters long.
              </Text>
            </Column.Item>
            <Column.Item>
              <BoundButton className='submit' name='submit' content='Submit'
                submit binder={this.state.binder} />
            </Column.Item>
          </Column>
        </form>

        <MessageModal error open={!!this.state.messageModal}
          title={this.state.messageModal ? this.state.messageModal.title : ''}
          message={this.state.messageModal ? this.state.messageModal.message : ''}
          onDismiss={this.handleMessageModalDismiss} />

        <WaitModal active={!!this.state.waitModal}
          message={this.state.waitModal ? this.state.waitModal.message : ''} />
      </div>
    )
  }
}