content: import React from 'react'
  import { observer } from 'mobx-react'
  import JobForm from '../models/JobForm'
  import Select from 'react-select'
  import $ from 'jquery'
  
  $(document).ready(function() {
    $('.collapse').on('shown.bs.collapse', function() {
      $(this).parent().find('.glyphicon-chevron-down').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up')
    }).on('hidden.bs.collapse', function() {
      $(this).parent().find('.glyphicon-chevron-up').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down')
    })
  })
  
  @observer
  class TextInput extends React.Component {
    getGroupClassName(field) {
      if (field.error) {
        return 'has-error has-feedback'
      } else if (field.value) {
        return 'has-success has-feedback'
      }
      return ''
    }
    getFieldIcon(field) {
      if (field.error) {
        return 'glyphicon glyphicon-remove form-control-feedback'
      } else if (field.value) {
        return 'glyphicon glyphicon-ok form-control-feedback'
      }
      return 'form-control-feedback'
    }
    render() {
      const field = this.props.field
      return (
        <div className={this.getGroupClassName(field)}>
          <label className="control-label col-sm-1" htmlFor={'sf-'+field.name}>{field.label}</label>
          <div className="col-sm-3">
            <input
              type="text"
              className="form-control"
              name={field.name}
              id={'sf-'+field.name}
              defaultValue={field.defaultValue}
              aria-describedby={'sf-'+field.name+'-status'}
              onChange={(event) => field.sync(event, field)}
              />
            <span className={this.getFieldIcon(field)} aria-hidden="true"></span>
            <span id={'sf-'+field.name+'-status'} className="sr-only">{field.error}</span>
            {field.error ? <p>{field.error}</p> : null}
          </div>
        </div>
      )
    }
  }
  
  TextInput.propTypes = {
    field: React.PropTypes.object.isRequired,
  }
  
  @observer
  class NumberInput extends React.Component {
    getGroupClassName(field) {
      if (field.error) {
        return 'has-error has-feedback'
      } else if (field.value) {
        return 'has-success has-feedback'
      }
      return ''
    }
    getFieldIcon(field) {
      if (field.error) {
        return 'glyphicon glyphicon-remove form-control-feedback'
      } else if (field.value) {
        return 'glyphicon glyphicon-ok form-control-feedback'
      }
      return 'form-control-feedback'
    }
    render() {
      const field = this.props.field
      return (
        <div className={this.getGroupClassName(field)}>
          <label className="control-label col-sm-1" htmlFor={'sf-'+field.name}>{field.label}</label>
          <div className="col-sm-3">
            <input
              type="number"
              className="form-control"
              name={field.name}
              id={'sf-'+field.name}
              defaultValue={field.defaultValue}
              aria-describedby={'sf-'+field.name+'-status'}
              onChange={(event) => field.sync(event, field)}
              />
            <span className={this.getFieldIcon(field)} aria-hidden="true"></span>
            <span id={'sf-'+field.name+'-status'} className="sr-only">{field.error}</span>
            {field.error ? <p>{field.error}</p> : null}
          </div>
        </div>
      )
    }
  }
  
  @observer
  class Checkbox extends React.Component {
    render() {
      const field = this.props.field
      return (
        <div>
          <label className="control-label col-sm-4" htmlFor={'sf-'+field.name}>
            {field.label} <input
              type="checkbox"
              name={field.name}
              id={'sf-'+field.name}
              defaultValue={field.defaultValue}
              aria-describedby={'sf-'+field.name+'-status'}
              onChange={(event) => field.sync(event, field)}
              />
          </label>
            <span id={'sf-'+field.name+'-status'} className="sr-only">{field.error}</span>
            {field.error ? <p>{field.error}</p> : null}
        </div>
      )
    }
  }
  
  Checkbox.propTypes = {
    field: React.PropTypes.object.isRequired,
  }
  
  @observer
  class MultiSelectInput extends React.Component {
    getOptions() {
      return this.props.field.getOptions(this.props.jobSummaryStore)
    }
    render() {
      const field = this.props.field
      return (
        <div>
          <label className="control-label col-sm-1" htmlFor={'sf-'+field.name}>{field.label}</label>
          <div className="col-sm-3">
            <Select
              multi
              simpleValue
              options={this.getOptions()}
              name={field.name}
              id={'sf-'+field.name}
              aria-describedby={'sf-'+field.name+'-status'}
              onChange={(value) => field.sync(value, field)}
              value={field.value}
              />
            <span id={'sf-'+field.name+'-status'} className="sr-only">{field.error}</span>
            {field.error ? <p>{field.error}</p> : null}
          </div>
        </div>
      )
    }
  }
  
  MultiSelectInput.propTypes = {
    field: React.PropTypes.object.isRequired,
    jobSummaryStore: React.PropTypes.object.isRequired,
  }
  
  @observer
  class SelectInput extends React.Component {
    getOptions() {
      return this.props.field.getOptions(this.props.jobSummaryStore)
    }
    render() {
      const field = this.props.field
      return (
        <div className="">
          <label className="control-label col-sm-1" htmlFor={'sf-'+field.name}>{field.label}</label>
          <div className="col-sm-3">
            <Select
              simpleValue
              options={this.getOptions()}
              name={field.name}
              id={'sf-'+field.name}
              aria-describedby={'sf-'+field.name+'-status'}
              onChange={(value) => field.sync(value, field)}
              value={field.value}
              />
            <span id={'sf-'+field.name+'-status'} className="sr-only">{field.error}</span>
            {field.error ? <p>{field.error}</p> : null}
          </div>
        </div>
      )
    }
  }
  
  SelectInput.propTypes = {
    field: React.PropTypes.object.isRequired,
    jobSummaryStore: React.PropTypes.object.isRequired,
  }
  
  @observer
  class Input extends React.Component {
    render() {
      const field = this.props.field
      if (field.type === 'textinput') {
        return (
          <TextInput
            field={field}
            />
        )
      }
      if (field.type === 'multiselect') {
        return (
          <MultiSelectInput
            field={field}
            jobSummaryStore={this.props.jobSummaryStore}
            />
        )
      }
      if (field.type === 'select') {
        return (
          <SelectInput
            field={field}
            jobSummaryStore={this.props.jobSummaryStore}
            />
        )
      }
      if (field.type === 'numberinput') {
        return (
          <NumberInput
            field={field}
            />
        )
      }
      if (field.type === 'checkbox') {
        return (
          <Checkbox
            field={field}
            />
        )
      }
    }
  }
  
  Input.propTypes = {
    field: React.PropTypes.object.isRequired,
    jobSummaryStore: React.PropTypes.object.isRequired,
  }
  
  @observer
  class ModalComponent extends React.Component {
    alertField() {
      const jobForm = this.props.jobForm
      if (jobForm.submitError) {
        return (
          <div id="job-editor-alert" className="alert alert-warning alert-dismissible" role="alert">
            <button type="button" className="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>Error submitting job</strong>
            <p>{jobForm.submitStatus}</p>
            <p>{jobForm.submitError}</p>
          </div>
        )
      }
    }
    typeName() {
      return this.props.jobForm.scheduled ? 'scheduled' : 'dependent'
    }
    formattedTypeName() {
      return this.props.jobForm.scheduled ? 'Scheduled' : 'Dependent'
    }
    render() {
      const jobForm = this.props.jobForm
      var normalFields = []
      var _normalFields = []
      var advancedFields = []
      var _advancedFields = []
      var counter = 0
      this.props.jobForm.fields.forEach(f => {
        if (f.name === 'schedule' && !jobForm.scheduled) return
        if (f.name === 'scheduleTimeZone' && !jobForm.scheduled) return
        if (f.name === 'parents' && jobForm.scheduled) return
        if (f.advanced) {
          _advancedFields.push(<Input key={f.name} field={f} jobSummaryStore={this.props.jobSummaryStore} />)
          if (_advancedFields.length >= 3) {
            advancedFields.push(<div key={counter++} className="row">{_advancedFields}</div>)
            advancedFields.push(<div key={counter++} className="clearfix visible-xs-block"></div>)
            _advancedFields = []
          }
        } else {
          _normalFields.push(<Input key={f.name} field={f} jobSummaryStore={this.props.jobSummaryStore} />)
          if (_normalFields.length >= 3) {
            normalFields.push(<div key={counter++} className="row">{_normalFields}</div>)
            normalFields.push(<div key={counter++} className="clearfix visible-xs-block"></div>)
            _normalFields = []
          }
        }
      })
      normalFields.push(<div key={counter++} className="row">{_normalFields}</div>)
      advancedFields.push(<div key={counter++} className="row">{_advancedFields}</div>)
      return (
        <div className="modal fade" id={this.typeName() + '-job-editor-modal'} tabIndex="-1" role="dialog" aria-labelledby="mymodallabel">
          <div className="modal-dialog custom-modal" role="document">
            <div className="modal-content">
              <div className="modal-header">
                <button type="button" className="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>
                <h4 className="modal-title" id={this.typeName() + '-job-editor-modal-label'}>New {this.formattedTypeName()} Job</h4>
              </div>
              <form className="form-horizontal" id={this.typeName() + '-job-editor-form'} onSubmit={jobForm.onSubmit.bind(jobForm)}>
                <div className="modal-body">
                  {this.alertField()}
                  <div className="panel-group">
                    <div className="container-fluid">
                      {normalFields}
                    </div>
                  </div>
                  <div className="panel-group">
                    <div className="panel panel-default">
                      <div className="panel-heading">
                        <h4 className="panel-title">
                          <a role="button" data-toggle="collapse" href={'#collapse' + this.typeName()} aria-expanded="true" aria-controls={'collapse' + this.typeName()} style={{textDecoration: 'none'}}>
                            <small>Advanced Options <span className="glyphicon glyphicon-chevron-down"></span></small>
                          </a>
                        </h4>
                      </div>
                      <div id={'collapse' + this.typeName()} className="panel-collapse collapse">
                        <div className="panel-body">
                          <div className="container-fluid">
                            {advancedFields}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="modal-footer">
                  <button type="button" className="btn btn-default btn-danger" onClick={jobForm.reset.bind(jobForm)}>Reset</button>
                  <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" className="btn btn-primary" onClick={jobForm.onSubmit.bind(jobForm)} disabled={this.props.jobForm.submitDisabled} data-loading-text='sending... <i class="fa fa-spinner fa-pulse fa-fw"></i>'>Add Job</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      )
    }
  }
  
  var scheduledJobForm = new JobForm(true)
  var dependentJobForm = new JobForm(false)
  
  @observer
  class JobEditor extends React.Component {
    render() {
      return (
        <div className="panel-heading">
          <div className="btn-group text-right">
            <button type="button" className="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i className="fa fa-plus" aria-hidden="true"></i> ADD JOB
            </button>
            <ul className="dropdown-menu">
              <li><a href="#" data-toggle="modal" data-target="#scheduled-job-editor-modal"><i className="fa fa-calendar" aria-hidden="true"></i> scheduled</a></li>
              <li><a href="#" data-toggle="modal" data-target="#dependent-job-editor-modal"><i className="fa fa-share-alt" aria-hidden="true"></i> dependent</a></li>
            </ul>
          </div>
          <ModalComponent jobSummaryStore={this.props.jobSummaryStore} jobForm={scheduledJobForm} />
          <ModalComponent jobSummaryStore={this.props.jobSummaryStore} jobForm={dependentJobForm} />
        </div>
      )
    }
  }
  
  export default observer(JobEditor);
  