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

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 validations = {
    email: {
      isValid: (r, v) => (v !== ''),
      isDisabled: (r) => (!!r._id)
    },
    firstName: {
      isValid: (r, v) => (v !== '')
    },
    lastName: {
      isValid: (r, v) => (v !== '')
    },
    zip: {
      isValid: (r, v) => (v === '' || regExpPattern.zip.test(v))
    },
    state: {
      isValid: (r, v) => (v === '' || regExpPattern.state.test(v))
    },
    city: {
      isValid: true
    },
    address1: {
      isValid: true
    },
    address2: {
      isValid: true
    },
    homePhone: {
      isValid: (r, v) => (v === '' || regExpPattern.phone.test(v))
    },
    cellPhone: {
      isValid: (r, v) => (v === '' || regExpPattern.phone.test(v))
    },
    dateOfBirth: {
      isValid: true
    },
    dateOfHire: {
      isValid: true
    },
    ssn: {
      isValid: (r, v) => (v === '' || regExpPattern.ssn.test(v))
    },
    role: {
      isDisabled: true
    },
    save: {
      nonValue: true,
      isDisabled: (r) => (!r.anyModified || !r.allValid)
    }
  }

  constructor(props) {
    super(props)

    this.handleSubmit = this.handleSubmit.bind(this)
    this.state = {
      validator: new Validator(
        this.props.user, ProfileForm.validations, this.props.onModifiedChanged)
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.user !== this.props.user) {
      this.setState({
        validator: new Validator(
          nextProps.user, ProfileForm.validations, nextProps.onModifiedChanged)
      })
    }
  }

  handleSubmit(e) {
    e.preventDefault()

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

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

  render() {
    return (
      <form className='profile-form' onSubmit={this.handleSubmit}>
        <Column stackable>
          <Column.Item>
            <ValidatedInput label='First Name' name='firstName' width={8}
              validator={this.state.validator} />
          </Column.Item>
          <Column.Item>
            <ValidatedInput label='Last Name' name='lastName' width={8}
              validator={this.state.validator} />
          </Column.Item>
          <Column.Item>
            <ValidatedInput label='Email' name='email' width={8} message='Required. Must be a valid email address.'
              validator={this.state.validator} />
          </Column.Item>
          <Column.Item>
            <Button fluid content={'Change Email'} label='&nbsp;'
              width={4} onClick={this.props.onChangeEmail} />
            <Button fluid content={'Change Password'} label='&nbsp;'
              width={4} onClick={this.props.onChangePassword} />
          </Column.Item>
          <Column.Item>
            <ValidatedButton submit primary width={4} size='medium' content='Save' label='&nbsp;' name='save'
              validator={this.state.validator} />
          </Column.Item>
        </Column>
      </form>
    )
  }
}