context = window
@TestDrivePackageDialog = React.createClass({

  mixins: [Reflux.listenTo(@AppStore, "onAppInit")]
  teacher: null

  beforeShow: (args) ->
    # d1 should be a teacher ID (vs a user ID that happens to be a teacher)
    logger.debug("TestDrivePackageDialog.beforeShow", args.d1)
    @setState({target: args.d1, page_data: window.page_data})


  afterHide: () ->

  onAppInit: (@app) ->
    dialogBindings = {
      'beforeShow': @beforeShow,
      'afterHide': @afterHide
    };

    @app.bindDialog('test-drive-package-dialog', dialogBindings);

  getInitialState: () ->
    {
    target: null,
    page_data: null
    }


  componentDidMount: () ->
    @root = $(@getDOMNode())
    @dialog = @root.closest('.dialog')

  renderTeacher: (teacher) ->
    photo_url = '/assets/shared/avatar_generic.png'
    if teacher.photo_url?
      photo_url = teacher.photo_url

    `<div className="teacher-select">
      <div className="avatar">
        <img src={photo_url}/>
      </div>
      <div className="username">
        {teacher.first_name}
        <br/>
        {teacher.last_name}
      </div>
      <div className="checkbox-wrapper">
        <input type="checkbox" name="teacher-select" data-teacher-id={teacher.id}/>
      </div>
    </div>`

  doCancel: (e) ->
    e.preventDefault()
    @app.layout.closeDialog('test-drive-package-dialog', true);

  selectTeachers: (e) ->
    e.preventDefault()

    # validate

    if @state.target == '2'
      checked = @root.find('input[type="checkbox"]:checked')

      if checked.length != 2
        window.JK.Banner.showAlert('hold on there', 'Please select 2 teachers.')
        return

    if @state.target == '1'
      checked = @root.find('input[type="checkbox"]:checked')

      if checked.length != 1
        window.JK.Banner.showAlert('hold on there', 'Please select 1 teacher.')
        return

    teachers = []


    $.each(checked, (i, node) => (
      $node = $(node)
      teacherId = $node.attr('data-teacher-id')
      for teacher in @state.page_data.package.teachers
        if teacher.id == teacherId
          teachers.push(teacher)
          break
    ))
    @dialog.data('result', {package_type: @state.target, teachers: teachers})
    @app.layout.closeDialog('test-drive-package-dialog')
  render: () ->
    if @state.target == '2'
      help =
        `<p>
          Check the boxes under the 2 instructors you want to select for your TestDrive package. Then click the Select
          button below.
        </p>`
    else
      help =
        `<p>
          Check the box under the instructor you want to select for your TestDrive package. Then click the Select button
          below.
        </p>`

    teachers = []

    if @state.page_data?.package?.teachers?
      for teacher in @state.page_data.package.teachers
        teachers.push(@renderTeacher(teacher))

    teacherHolderClasses = {"teacher-holder" : true, "two": teachers.length == 2, "four": teachers.length == 4}
    dialogInnerClasses = {"dialog-inner": true, "two": teachers.length == 2, "four": teachers.length == 4}
    `<div>
      <div className="content-head">
        <img className="content-icon" src="/assets/content/icon_add.png" height={19} width={19}/>

        <h1>select instructors</h1>
      </div>
      <div className={classNames(dialogInnerClasses)}>

        {help}

        <div className={classNames(teacherHolderClasses)}>
          {teachers}
          <br className="clearall"/>
        </div>


        <div className="actions">
          <a onClick={this.doCancel} className="button-grey">CANCEL</a>
          <a onClick={this.selectTeachers} className="button-orange select-teachers">SELECT</a>
        </div>
      </div>
    </div>`

})