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

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

  getInitialState: () ->
    {
      experiences_teaching: []
      experiences_education: []
      experiences_award: []
    }

  screenName: () ->
    "experience"

  onTeacherStateChanged: (changes) ->
    $root = jQuery(this.getDOMNode())
    unless this.handleErrors(changes)
      teacher = changes.teacher
      this.setState({
        #validate_basics: true,
        experiences_teaching: teacher.experiences_teaching
        experiences_education: teacher.experiences_education
        experiences_award: teacher.experiences_award
      })

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

    });

  navDestination: (instructions) ->
    navTo=null
    if instructions?
      logger.debug("handling instructions", instructions)
      if instructions.direction=="cancel"
        navTo = @teacherSetupSource()
      else if instructions.direction=="back"
        navTo = @teacherSetupDestination("basics")
      else if instructions.direction=="next"
        navTo = @teacherSetupDestination("pricing")

    navTo

  handleNav: (e) ->
    logger.debug("handleNav #{this.screenName()}: ", this.state, this, e)
    navTo = this.navDestination(e)
    teacherActions.change.trigger(this.state, {navTo: navTo, instructions:e})

  handleListChange: (listName, listObjects)->
    logger.debug("EXPERIENCE handleListChange:", listName, listObjects)
    this.setState({
      "experiences_#{listName}": listObjects
    })
    #this.forceUpdate()

  render: () ->
    `<div className="TeacherSetupExperience TeacherSetupComponent">
      <div className="teacher-third-column">
        <h3 className="sub-caption">TEACHING EXPERIENCE:</h3>
        <TeacherExperienceEditableList showEndDate="true" experienceType="teaching" onItemChanged={this.handleListChange} listItems={this.state.experiences_teaching}/>
      </div>

      <div className="teacher-third-column">
        <h3 className="sub-caption">EDUCATION:</h3>
        <TeacherExperienceEditableList
          showEndDate="true"
          experienceType="education"
          onItemChanged={this.handleListChange}
          titleLabel="Degree/Cert"
          orgLabel="School"
          listItems={this.state.experiences_education}/>
      </div>

      <div className="teacher-third-column">
        <h3 className="sub-caption">AWARDS:</h3>
        <TeacherExperienceEditableList
          experienceType="award"
          onItemChanged={this.handleListChange}
          titleLabel="Award"
          orgLabel="Organization"
          listItems={this.state.experiences_award}/>
      </div>

      <TeacherSetupNav handleNav={this.handleNav}> </TeacherSetupNav>
    </div>`


})