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

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

  screenName: () ->
    "introduction"

  getInitialState: () ->
    {}

  onTeacherStateChanged: (changes) ->
    $root = jQuery(this.getDOMNode())
    logger.debug("onTeacherIntroStateChanged", changes, changes.errors?, changes.errors)
    unless this.handleErrors(changes)
      teacher = changes.teacher
      logger.debug("@teacher", teacher)
      this.setState({
        biography: teacher.biography,
        introductory_video: teacher.introductory_video,
        years_teaching: teacher.years_teaching,
        years_playing: teacher.years_playing,
        validate_introduction: true
      })

  captureFormState: (changes) ->
    $root = jQuery(this.getDOMNode())
    this.setState({
      biography: $root.find(".teacher-biography").val(),
      introductory_video: $root.find(".teacher-introductory-video").val(),
      years_teaching: $root.find(".years-teaching-experience").val(),
      years_playing: $root.find(".years-playing-experience").val()
    });
    logger.debug("capturedFormState", this.state, changes)

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

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

  render: () ->
    logger.debug("RENDERING TeacherSetupIntroduction", this.props, this.state)
    `<div className="TeacherSetupIntroduction TeacherSetupComponent" >
      <div className="teacher-big-column left">
        <div className="teacher-field" name="biography">
          <label for="teacher-biography">Teacher Bio:</label>
          <textarea className="teacher-biography" rows="12" value={this.state.biography} onChange={this.captureFormState} required/>
        </div>
      </div>
      <div className="teacher-small-column left">
        <div className="teacher-field" name="introductory_video">
          <label for="teacher-introductory-video">Teacher Introductory Video:</label>
          <input className="teacher-introductory-video youtube-video" type="url" maxLength="1024" value={this.state.introductory_video} onChange={this.captureFormState} required/>
          <em>(enter YouTube URL)</em>
        </div>

        <div className="teacher-field" name="years_teaching">
          <label for="years-teaching-experience">Years Teaching Experience:</label>
          <input className="years-teaching-experience" type="number" min="0" max="99" value={this.state.years_teaching} onChange={this.captureFormState} value="0" placeholder="Select" />
        </div>

        <div className="teacher-field" name="years_playing">
          <label for="teacher-playing-experience">Years Playing Experience:</label>
          <input className="years-playing-experience" type="number" min="0" max="99" value={this.state.years_playing} onChange={this.captureFormState} value="0" placeholder="Select" />
        </div>
      </div>
      <TeacherSetupNav handleNav={this.handleNav}/>
    </div>`

})