import React from 'react'
import PropTypes from 'prop-types'
import { Column, Row, Box, Button, BoundInput, BoundButton } from 'ui'
import { sizeInfo, colorInfo } from 'ui/style'
import { FormBinder } from 'react-form-binder'
import autobind from 'autobind-decorator'

export class ProfileForm extends React.Component {
  static propTypes = {
    user: PropTypes.object.isRequired,
    onSaved: PropTypes.func.isRequired,
    onModifiedChanged: PropTypes.func,
    onChangePassword: PropTypes.func,
    onChangeEmail: PropTypes.func
  }

  static bindings = {
    email: {
      isValid: (r, v) => (v !== ''),
      isDisabled: (r) => (!!r._id)
    },
    firstName: {
      isValid: (r, v) => (v !== '')
    },
    lastName: {
      isValid: (r, v) => (v !== '')
    },
    save: {
      noValue: true,
      isDisabled: (r) => (!r.anyModified || !r.allValid)
    }
  }

  constructor(props) {
    super(props)
    this.state = {
      binder: new FormBinder(
        this.props.user, ProfileForm.bindings, this.props.onModifiedChanged)
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.user !== this.props.user) {
      this.setState({
        binder: new FormBinder(
          nextProps.user, ProfileForm.bindings, nextProps.onModifiedChanged)
      })
    }
  }

  @autobind
  handleSubmit(e) {
    e.preventDefault()

    let obj = this.state.binder.getValues()

    if (obj && this.props.onSaved) {
      this.props.onSaved(obj)
    }
  }

  @autobind
  handleChangeEmail() {
    this.props.onChangeEmail(this.state.binder.getFieldValue('email'))
  }

  render() {
    const { binder } = this.state

    return (
      <form onSubmit={this.handleSubmit} id='profileForm'>
        <Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}
          radius={sizeInfo.formBoxRadius}>
          <Row>
            <Row.Item width={sizeInfo.formRowSpacing} />
            <Row.Item grow>
              <Column>
                <Column.Item height={sizeInfo.formColumnSpacing} />
                <Column.Item>
                  <BoundInput label='First Name' name='firstName'
                    message='First name is required' binder={binder} />
                </Column.Item>
                <Column.Item>
                  <BoundInput label='Last Name' name='lastName'
                    binder={binder} />
                </Column.Item>
                <Column.Item>
                  <BoundInput label='Email' name='email'
                    message='Required. Must be a valid email address.'
                    binder={binder} />
                </Column.Item>
                <Column.Item height={sizeInfo.formColumnSpacing} />
                <Column.Item height={sizeInfo.buttonHeight}>
                  <Row>
                    <Row.Item>
                      <Button text={'Change Email'} label='&nbsp;'
                        width={sizeInfo.buttonWideWidth} onClick={this.handleChangeEmail} />
                    </Row.Item>
                    <Row.Item width={sizeInfo.formRowSpacing} />
                    <Row.Item>
                      <Button text={'Change Password'} label='&nbsp;'
                        width={sizeInfo.buttonWideWidth} onClick={this.props.onChangePassword} />
                    </Row.Item>
                    <Row.Item grow />
                    <Row.Item>
                      <BoundButton submit='profileForm' size='medium' text='Save' label='&nbsp;' name='save'
                        binder={binder} />
                    </Row.Item>
                  </Row>
                </Column.Item>
                <Column.Item height={sizeInfo.formColumnSpacing} />
              </Column>
            </Row.Item>
            <Row.Item width={sizeInfo.formRowSpacing} />
          </Row>
        </Box>
      </form>
    )
  }
}