content: import React from 'react'
  import PortalClassInformation from './information'
  import TeacherList from './teacher-list'
  import FormErrors from '../../helpers/form-errors'
  import railsFormField from '../../helpers/rails-form-field'
  
  export default class ClassSetupForm extends React.Component {
    constructor (props) {
      super(props)
  
      this.state = {
        currentTeachers: this.props.teachers.current
      }
  
      this.handleSetCurrentTeachers = this.handleSetCurrentTeachers.bind(this)
    }
  
    handleSetCurrentTeachers (currentTeachers) {
      this.setState({ currentTeachers })
    }
  
    renderLabelCell (label, field) {
      return (
        <td className='title'>
          <label className='right' htmlFor={field.htmlFor} style={{ whiteSpace: 'nowrap' }}>{label}:</label>
        </td>
      )
    }
  
    render () {
      const { currentTeachers } = this.state
      const { portalClass, portalClassTeacher, schools, portalClassGrades, enableGradeLevels, activeGrades, cancelLink, errors, teachers } = this.props
      const creating = !portalClass.id
      const updating = !creating
      const field = railsFormField('portal_clazz')
      const nameField = field('name')
      const teachersField = field('teachers')
      const descriptionField = field('description')
      const classWordField = field('class_word')
      const schoolField = field('school')
      const gradeLevelsField = field('grade_levels')
      const currentTeachersField = field('current_teachers')
  
      const gradeLevelCols = 4
      const gradeLevelWidth = 95.0 / gradeLevelCols
  
      const gradeLevelRows = []
      activeGrades.forEach(function (activeGrade, index) {
        const row = Math.floor(index / gradeLevelCols)
        gradeLevelRows[row] = (gradeLevelRows[row] || [])
        gradeLevelRows[row].push(activeGrade)
      })
  
      return (
        <>
          <div className='content'>
            <FormErrors errors={errors} />
          </div>
          <div className='right'>
            <h1>Class Setup Information</h1>
  
            {updating ? <PortalClassInformation portalClass={portalClass} portalClassTeacher={portalClassTeacher} /> : undefined}
  
            <table className='classsetupform'>
              <tbody>
                <tr>
                  {this.renderLabelCell('Class Name', nameField)}
                  <td>
                    <input id={nameField.id} name={nameField.name} size='30' type='text' defaultValue={portalClass.name} />
                  </td>
                </tr>
                {updating
                  ? <tr>
                    {this.renderLabelCell('Teachers', teachersField)}
                    <td className='left'>
                      <TeacherList portalClassTeacher={portalClassTeacher} teachers={teachers} setCurrentTeachers={this.handleSetCurrentTeachers} />
                    </td>
                  </tr>
                  : undefined
                }
                <tr>
                  {this.renderLabelCell('Description', descriptionField)}
                  <td>
                    <textarea className='mceNoEditor' id={descriptionField.id} name={descriptionField.name} rows='5' cols='50' defaultValue={portalClass.description} />
                  </td>
                </tr>
                <tr>
                  {this.renderLabelCell('Class Word', classWordField)}
                  <td>
                    <input id={classWordField.id} name={classWordField.name} type='text' defaultValue={portalClass.class_word} />
                  </td>
                </tr>
                {creating
                  ? <tr>
                    {this.renderLabelCell('School', schoolField)}
                    <td>
                      <select id={schoolField.id} name={schoolField.name} >
                        {schools.map(function (school) {
                          return <option key={school.id} value={school.id} defaultChecked={portalClass.school === school.id}>{school.name}</option>
                        })}
                      </select>
                    </td>
                  </tr>
                  : undefined
                }
                {enableGradeLevels
                  ? <tr>
                    {this.renderLabelCell('Grade Levels', gradeLevelsField)}
                    <td>
                      <table style={{ width: '100%' }}>
                        <tbody>
                          {gradeLevelRows.map(function (row, rowIndex) {
                            return (
                              <tr key={rowIndex}>
                                {row.map(function (grade) {
                                  const name = `${gradeLevelsField.name}[${grade}]`
                                  const checked = portalClassGrades.indexOf(grade) !== -1
                                  return (
                                    <td key={grade} style={{ textAlign: 'left', whiteSpace: 'nowrap', width: `${gradeLevelWidth}%` }}>
                                      <input type='checkbox' name={name} value='1' defaultChecked={checked} /> <label htmlFor={name}>{grade}</label>
                                    </td>
                                  )
                                })}
                              </tr>
                            )
                          })}
                        </tbody>
                      </table>
                    </td>
                  </tr>
                  : undefined
                }
              </tbody>
            </table>
            <hr className='ht-thick' />
            <div className='form-submit'>
              <a href={cancelLink}>Cancel</a>
              <span className='create_button'>
                <input type='submit' className='pie' value='Save Changes' />
              </span>
            </div>
          </div>
          <input type='hidden' name='teacher_id' value={portalClass.teacher_id} />
          {portalClass.id ? <input type='hidden' name='id' value={portalClass.id} /> : undefined}
          {updating ? <input type='hidden' name={currentTeachersField.name} value={currentTeachers.map(t => t.id).join(',')} /> : undefined}
        </>
      )
    }
  }
  