context = window
teacherActions = window.JK.Actions.Teacher
logger = context.JK.logger
rest = window.JK.Rest()

@TeacherSetupBasics = React.createClass({
  mixins: [
    @TeacherSetupMixin,
    Reflux.listenTo(@AppStore,"onAppInit"),
    Reflux.listenTo(TeacherStore, "onTeacherStateChanged")
  ]

  getInitialState: () ->
    {}

  screenName: () ->
    "basics"

  onTeacherStateChanged: (changes) ->
    $root = jQuery(this.getDOMNode())
    unless this.handleErrors(changes)
      teacher = changes.teacher
      this.setState(teacher)

  captureFormState: (changes) ->
    $root = jQuery(this.getDOMNode())
    this.setState({

    });

  handleListChange: (listName, selectedObjects)->
    logger.debug("handleListChange:", listName, selectedObjects)
    this.setState({
      "#{listName}": selectedObjects
    });

  handleFieldChange: (fieldName, value)->
    logger.debug("handleFieldChange:", fieldName, value)
    this.setState({
      "#{fieldName}": value
    });

  navDestination: (instructions) ->
    navTo=null
    if instructions?
      if instructions.direction=="cancel"
        navTo = @teacherSetupSource()
      else if instructions.direction=="back"
        navTo = @teacherSetupDestination("introduction")
      else if instructions.direction=="next"
        navTo = @teacherSetupDestination("experience")

    navTo

  handleNav: (e) ->
    navTo = this.navDestination(e)
    this.state.validate_basics = true
    teacherActions.change.trigger(this.state, {navTo: navTo, instructions:e})

  render: () ->
    # Render the following:
    # Instruments
    # Subjects
    # Genres
    # Languages
    # All lists will take a list of selected keys,
    # and will otherwise self-render the available

    `<div className="TeacherSetupBasics TeacherSetupComponent">
      <div className="teacher-quarter-column">
        <div className="teacher-field" name="instruments">
          <h3>Instruments Taught:</h3>
          <InstrumentCheckBoxList onItemChanged={this.handleListChange} selectedInstruments={this.state.instruments}/>
        </div>
      </div>
      <div className="teacher-quarter-column">
        <div className="teacher-field" name="subjects">
          <h3>Music Subjects Taught:</h3>
          <SubjectCheckBoxList onItemChanged={this.handleListChange} selectedSubjects={this.state.subjects}/>
        </div>
      </div>
      <div className="teacher-quarter-column">
        <div className="teacher-field" name="genres">
          <h3>Genres Taught:</h3>
          <GenreCheckBoxList onItemChanged={this.handleListChange} selectedGenres={this.state.genres}/>
        </div>
      </div>
      <div className="teacher-quarter-column">
        <div className="teacher-field" name="languages">
          <h3>Languages Spoken:</h3>
          <LanguageCheckBoxList onItemChanged={this.handleListChange} selectedLanguages={this.state.languages}/>
        </div>
      </div>
      <br className="clearall"/>
      <div className="teacher-half-column">
        <div className="teacher-field" name="levels_taught">
          <h3>Student Levels Taught:</h3>
          <div className="student-levels">
            <TeacherStudentLevel onChange={this.handleFieldChange} student="teaches_beginner" display="Beginner" level={this.state.teaches_beginner} />
            <TeacherStudentLevel onChange={this.handleFieldChange} student="teaches_intermediate" display="Intermediate" level={this.state.teaches_intermediate} />
            <TeacherStudentLevel onChange={this.handleFieldChange} student="teaches_advanced" display="Advanced" level={this.state.teaches_advanced} />
          </div>
        </div>
      </div>
      <div className="teacher-half-column">
        <div className="teacher-field" name="ages_taught">
          <h3>Student Ages Taught:</h3>
          <div className="student-ages">
            <AgeRangeList onItemChanged={this.handleFieldChange} objectName="teaches_age_lower" selectedAge={this.state.teaches_age_lower} />
            <span className="age-to-age">to</span>
            <AgeRangeList onItemChanged={this.handleFieldChange} objectName="teaches_age_upper" selectedAge={this.state.teaches_age_upper} />
          </div>
        </div>
      </div>
      <TeacherSetupNav handleNav={this.handleNav}></TeacherSetupNav>
    </div>`


})