import React from 'react'
import PropTypes from 'prop-types'
import { autoBind } from 'auto-bind2'
import { Modal, Button, Icon, Column, Row, Text, BoundInput, BoundButton } from 'ui'
import { FormBinder } from 'react-form-binder'

export class ChangePasswordModal extends React.Component {
  static propTypes = {
    open: PropTypes.bool,
    onDismiss: PropTypes.func
  }

  static bindings = {
    oldPassword: {
      alwaysGet: true,
      isValid: (r, v) => (v !== '')
    },
    newPassword: {
      alwaysGet: true,
      isValid: (r, v) => (v !== '' && v !== r.fields.oldPassword.value)
    },
    reenteredNewPassword: {
      alwaysGet: true,
      isValid: (r, v) => (v !== '' && v === r.fields.newPassword.value)
    },
    submit: {
      isDisabled: (r) => (!r.allValid),
      noValue: true
    }
  }

  constructor(props) {
    super(props)
    autoBind(this, (name) => (name.startsWith('handle')))
    this.state = {
      binder: new FormBinder({}, ChangePasswordModal.bindings)
    }
  }

  close(passwords) {
    this.state.binder = new FormBinder({}, ChangePasswordModal.bindings)
    this.props.onDismiss(passwords)
  }

  handleClose() {
    close(null)
  }

  handleSubmit(e) {
    e.preventDefault()
    let passwords = null

    if (this.state.binder.allValid) {
      const oldPassword = this.state.binder.getField('oldPassword').value
      const newPassword = this.state.binder.getField('newPassword').value
      passwords = { oldPassword, newPassword }
    }
    this.close(passwords)
  }

  handleClick(e) {
    this.close(null)
  }

  render() {
    return (
      <Modal dimmer='inverted' open={this.props.open} onClose={this.handleClose} closeOnDimmerClick={false}>
        <form id='passwordForm' onSubmit={this.handleSubmit}>
          <Column.Item color='black' icon='edit'>
            <Text size='large'>Change Password</Text>
          </Column.Item>
          <Column.Item>
            <Column>
              <Column.Item>
                <BoundInput label='Current Password' password name='oldPassword'
                  message='Your existing password, cannot be blank'
                  binder={this.state.binder} />
              </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'
                  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'
                  binder={this.state.binder} />
              </Column.Item>
            </Column>
          </Column.Item>
          <Column.Item>
            <Row>
              <BoundButton primary submit form='passwordForm' name='submit' binder={this.state.binder}>
                <Icon name='checkmark' /> OK
              </BoundButton>
              <Button color='red' onClick={this.handleClick}>
                <Icon name='close' /> Cancel
              </Button>
            </Row>
          </Column.Item>
        </form>
      </Modal>
    )
  }
}