/* @flow */

import React from 'react'

import isEqual from 'lodash/isEqual'
import validator from 'is-my-json-valid'
import Flatpickr from 'react-flatpickr'
import Select from 'react-select'
import moment from 'moment'

const debounce = require('throttle-debounce/debounce')

type ReactEvent = { preventDefault: Function, target: { value: ?string } }

type Educ = {
  id: ?string,
  uid: ?string,
  school: ?string,
  degree: ?string,
  fieldOfStudy: ?string,
  startDate: ?string,
  endDate: ?string
}

type Props = {
  educ: Educ,
  onSave: Function,
  onRemove: Function
}

type State = {
  attributes: Educ
}

class EducationForm extends React.Component<Props, State> {
  flatOptions = {
    altInput: true,
    altFormat: 'd/m/Y'
  }
  options = Array(moment().year() - 1929).fill()
    .map((_, index) => {
      const value = moment().year() - index
      return {
        value: value,
        label: value
      }
    })
  validate = validator({
    required: true,
    type: 'object',
    properties: {
      id: {
        type: 'string'
      },
      uid: {
        type: 'string'
      },
      school: {
        type: 'string',
        required: true,
        minLength: 1
      },
      degree: {
        type: 'string',
        required: true,
        minLength: 1
      },
      fieldOfStudy: {
        type: 'string',
        required: true,
        minLength: 1
      },
      startDate: {
        type: 'string',
        required: true,
        minLength: 1
      },
      endDate: {
        type: 'string',
        required: true,
        minLength: 1
      }
    }
  })

  constructor (props: Props) {
    super(props)

    this.submitForm = debounce(1000, this.submitForm)
    this.state = {
      attributes: props.educ
    }
    this.state.attributes.startDate = ''
    this.state.attributes.endDate = ''
  }

  componentWillUpdate (nextProps: Props) {
    if (!isEqual(this.props.educ, nextProps.educ)) {
      this.setState({
        attributes: nextProps.educ
      })
    }
  }

  updateAttribute = (e: ReactEvent, attribute: string) => {
    e.preventDefault && e.preventDefault()

    const attributes = {
      ...this.state.attributes,
      [attribute]: e.target ? e.target.value : e
    }
    this.setState({ attributes: attributes }, () => this.submitForm())
  }

  onRemove = (e: ReactEvent) => {
    e.preventDefault()
    this.props.onRemove(this.state.attributes)
  }

  onSave = _ => {
    this.validate(this.state.attributes) &&
      this.props.onSave(this.state.attributes)
  }

  formValid = () => {
    return (
      this.validate(this.state.attributes) &&
      !isEqual(this.props.educ, this.state.attributes)
    )
  }

  submitForm = _ => {
    if (this.formValid()) {
      this.onSave()
    }
  }

  render () {
    const attributes = this.state.attributes

    return (
      <form
        key={attributes.id || attributes.uid}
        className='form'
        onSubmit={this.onSave}
      >
        <div className='row'>
          <div className='col-sm-11'>
            <div className='form-group'>
              <input
                type='text'
                className='form-control'
                name='school'
                value={attributes.school}
                required='required'
                placeholder='University'
                onChange={e => {
                  this.updateAttribute(e, 'school')
                }}
              />
            </div>
            <div className='form-group'>
              <input
                type='text'
                className='form-control'
                name='degree'
                value={attributes.degree}
                required='required'
                placeholder='Degree'
                onChange={e => {
                  this.updateAttribute(e, 'degree')
                }}
              />
            </div>
            <div className='form-group'>
              <input
                type='text'
                className='form-control'
                name='fieldOfStudy'
                value={attributes.fieldOfStudy}
                required='required'
                placeholder='Field of Study'
                onChange={e => {
                  this.updateAttribute(e, 'fieldOfStudy')
                }}
              />
            </div>
            <div className='row'>
              <div className='col-sm-6'>
                <div className='form-group'>
                  <label>Start Date</label>
                  <Select
                    className='form-control'
                    name='startDate'
                    value={attributes.startDate}
                    required={true}
                    onChange={e => {
                      this.updateAttribute(e, 'startDate')
                    }}
                    options={this.options}
                  />
                </div>
              </div>
              <div className='col-sm-6'>
                <div className='form-group'>
                  <label>End Date</label>
                  <Select
                    className='form-control'
                    name='endDate'
                    value={attributes.endDate}
                    required={true}
                    onChange={e => {
                      this.updateAttribute(e, 'endDate')
                    }}
                    options={this.options}
                  />
                </div>
              </div>
            </div>
          </div>
          <div className='col-sm-1'>
            <button
              href='#'
              className='btn btn-minim -danger pl-0'
              onClick={this.onRemove}
            >
              <i className='nc-icon-glyph ui-1_circle-delete' />
              Remove
            </button>
          </div>
        </div>
      </form>
    )
  }
}

export default EducationForm