context = window

@InviteSchoolUserDialog = React.createClass({

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

  beforeShow: (args) ->
    logger.debug("InviteSchoolUserDialog.beforeShow", args.d1)
    @firstName = ''
    @lastName = ''
    @email = ''

    @setState({inviteErrors: null, teacher: args.d1})
  afterHide: () ->

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

    @app.bindDialog('invite-school-user', dialogBindings);


  componentDidMount: () ->
    @root = $(@getDOMNode())

  getInitialState: () ->
    {inviteErrors: null}

  doCancel: (e) ->
    e.preventDefault()
    @app.layout.closeDialog('invite-school-user', true);

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

    email = @root.find('input[name="email"]').val()
    lastName = @root.find('input[name="last_name"]').val()
    firstName = @root.find('input[name="first_name"]').val()
    school = context.SchoolStore.getState().school
    @setState({inviteErrors: null})
    rest.createSchoolInvitation({id: school.id, as_teacher: this.state.teacher, email: email, last_name: lastName, first_name: firstName }).done((response) => @createDone(response)).fail((jqXHR) => @createFail(jqXHR))

  createDone:(response) ->
    context.SchoolActions.addInvitation(@state.teacher, response)
    context.JK.Banner.showNotice("invitation sent", "Your invitation has been sent!")
    @app.layout.closeDialog('invite-school-user')

  createFail: (jqXHR) ->

    handled = false

    if jqXHR.status == 422
      errors = JSON.parse(jqXHR.responseText)
      @setState({inviteErrors: errors})
      handled = true

    if !handled
      @app.ajaxError(jqXHR, null, null)

  render: () ->

    firstNameErrors = context.JK.reactSingleFieldErrors('first_name', @state.inviteErrors)
    lastNameErrors = context.JK.reactSingleFieldErrors('last_name', @state.inviteErrors)
    emailErrors = context.JK.reactSingleFieldErrors('email', @state.inviteErrors)

    firstNameClasses  = classNames({first_name: true, error: firstNameErrors?, field: true})
    lastNameClasses  = classNames({last_name: true, error: lastNameErrors?, field: true})
    emailClasses  = classNames({email: true, error: emailErrors?, field: true})

    if @state.teacher
      title = 'invite teacher'
      help = `<p>Send invitations to teachers who teach through your music school. Teachers who accept your invitation
        will be associated with your music school. Any revenues we collect for lessons delivered by these teachers will
        be processed such that we remit your school's share of these revenues to you, and you will then be responsible
        to distribute the teacher's share of these revenues, per the JamKazam terms of service. You will also have the
        option to manage scheduling of lessons for students sourced to the teacher from the JamKazam marketplace. </p>`
    else
      title = 'invite student'
      help = `<p>
        Send invitations to students who you have acquired through your own marketing initiatives (versus students
        JamKazam has brought to you). We will not bill these students for lessons, or will we withhold portions of such
        billings. All billing and management of your own students remains yours to manage, per the JamKazam terms of
        service.
      </p>`

    `<div>
      <div className="content-head">
        <img className="content-icon" src="/assets/content/icon_add.png" height={19} width={19}/>

        <h1>{title}</h1>
      </div>
      <div className="dialog-inner">

        {help}

        <div className={firstNameClasses}>
          <label>First Name: </label>
          <input type="text" defaultValue={this.firstName} name="first_name" />
          {firstNameErrors}
        </div>

        <div className={lastNameClasses}>
          <label>Last Name: </label>
          <input type="text" defaultValue={this.lastName} name="last_name" />
          {lastNameErrors}
        </div>

        <div className={emailClasses}>
          <label>Email Name: </label>
          <input type="text" defaultValue={this.email} name="email" />
          {emailErrors}
        </div>

        <div className="actions">
          <a onClick={this.doCancel} className="button-grey">CANCEL</a>
          <a onClick={this.doInvite} className="button-orange">SEND INVITATION</a>
        </div>
      </div>
    </div>`

})