import React from 'react'
import PropTypes from 'prop-types'
import { autoBind } from 'auto-bind2'
import { Modal, Button, Icon, Column, Text } from 'ui'
import { ValidatedInput, ValidatedButton, Validator } from '../Validated'
import { regExpPattern } from 'regexp-pattern'

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

  static validations = {
    newEmail: {
      isValid: (r, v) => (v !== '' && regExpPattern.email.test(v))
    },
    submit: {
      isDisabled: (r) => (!r.allValid),
      nonValue: true
    }
  }

  constructor(props) {
    super(props)
    autoBind(this, (name) => (name.startsWith('handle')))
    this.state = {
      validator: new Validator({}, ChangeEmailDialog.validations)
    }
  }

  close(newEmail) {
    this.state.validator = new Validator({}, ChangeEmailDialog.validations)
    this.props.onDismiss(newEmail)
  }

  handleClose() {
    this.close(null)
  }

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

    if (this.state.validator.anyModified && this.state.validator.allValid) {
      newEmail = this.state.validator.getField('newEmail').value
    }

    this.close(newEmail)
  }

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

  render() {
    return (
      <Modal dimmer='inverted' open={this.props.open} onClose={this.handleClose}
        closeOnDimmerClick={false}>
        <form className='user-form' id='emailForm' onSubmit={this.handleSubmit}>
          <Column>
            <Column.Item>
              <Text>Change Email</Text>
            </Column.Item>
            <Column.Item>
              <ValidatedInput label='New Email' name='newEmail' width={16}
                message='Your new email address, e.g. xyz@abc.com, cannot be blank'
                validator={this.state.validator} />
            </Column.Item>
            <Column.Item>
              <ValidatedButton primary submit form='emailForm' name='submit' validator={this.state.validator}>
                <Icon name='checkmark' /> OK
                </ValidatedButton>
              <Button color='red' onClick={this.handleClick}>
                <Icon name='close' /> Cancel
              </Button>
            </Column.Item>
          </Column>
        </form>
      </Modal>
    )
  }
}