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())

  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
        context.JK.Banner.showNotice('hold on there', 'Please select 2 teachers.')
        return

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

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

    teachers = []
    $.each(checked, (i, node) => (
      $node = $(node)
      teachers.push($node.data('teacher'))
    ))
    @root.data('result', { package_type: @state.target, teachers: teachers })
  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 = []


    `<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="dialog-inner">

        {help}

        {teachers}

        <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>`

})