context = window
rest = context.JK.Rest()

@RetailerTeacherLandingPage = React.createClass({

  render: () ->
    if this.props.retailer.large_photo_url?
      logo = `<div className="retailer-logo">
        <img src={this.props.retailer.large_photo_url}/>
      </div>`
    loggedIn = context.JK.currentUserId? && !this.props.preview

    if this.state.done
      ctaButtonText = 'sending you in...'
    else if this.state.processing
      ctaButtonText = 'hold on...'
    else
      if loggedIn
        ctaButtonText = "ALREADY A JAMKAZAM USER"
      else
        ctaButtonText = "SIGN UP"

    if loggedIn
      register =
        `<div className="register-area jam-class">
          <button className={classNames({'cta-button' : true, 'processing': this.state.processing})}
                  onClick={this.ctaClick}>{ctaButtonText}</button>
        </div>`
    else
      if this.state.loginErrors?
        for key, value of this.state.loginErrors
          break

        errorText = context.JK.getFullFirstError(key, this.state.loginErrors,
          {email: 'Email', password: 'Password', 'terms_of_service': 'The terms of service'})

      register = `<div className="register-area jam-class">
        <div className={classNames({'errors': true, 'active': this.state.loginErrors})}>
          {errorText}
        </div>
        <form className="retailer-signup-form">
          <div className="field">
            <label>Email: </label><input  type="text" defaultValue={this.props.defaultEmail} name="email"/>
          </div>
          <div className="field">
            <label>Password: </label><input type="password" name="password"/>
          </div>

          <div className="clearall"/>
          <input className="terms-checkbox" type="checkbox" name="terms"/><label className="terms-help">I have read and
          agree to the JamKazam <a href="/corp/terms" target="_blank">terms of service</a></label>

          <div className="clearall"/>
          <button className={classNames({'cta-button' : true, 'processing': this.state.processing})}
                  onClick={this.ctaClick}>{ctaButtonText}</button>
        </form>
        <p className="privacy-policy">
          We will not share your email.<br/>See our <a href="/corp/privacy" target="_blank">privacy policy</a>.
        </p>
      </div>`


    `<div className="container">
      <div className="header-area">
        <div className="header-content">
          {logo}

          <div className="headers">
            <h1>REGISTER AS A TEACHER</h1>

            <h2>with {this.props.retailer.name}</h2>
          </div>
          <br className="clearall"/>
        </div>
      </div>

      <div className="explain">
        <p>
          Please register here if you are currently a teacher with {this.props.retailer.name}, and if you plan to teach
          online music lessons for students of {this.props.retailer.name} using the JamKazam service. When you have registered, we
          will
          email you instructions to set up your online teacher profile, and we'll schedule a brief online training session to make sure
          you are comfortable using the service and ready to go with students in online lessons.
        </p>
      </div>

      {register}
    </div>`

  getInitialState: () ->
    {loginErrors: null, processing: false}

  componentDidMount: () ->
    $root = $(this.getDOMNode())
    $checkbox = $root.find('.terms-checkbox')
    context.JK.checkbox($checkbox)

# add item to cart, create the user if necessary, and then place the order to get the free JamTrack.
  ctaClick: (e) ->
    e.preventDefault()

    return if @state.processing

    @setState({loginErrors: null})

    loggedIn = context.JK.currentUserId?

    if loggedIn
      #window.location.href = "/client#/jamclass"
      window.location.href = "/client#/profile/#{context.JK.currentUserId}"
    else
      @createUser()

    @setState({processing:true})

  createUser: () ->
    $form = $('.retailer-signup-form')
    email = $form.find('input[name="email"]').val()
    password = $form.find('input[name="password"]').val()
    terms = $form.find('input[name="terms"]').is(':checked')

    rest.signup({
      email: email,
      password: password,
      first_name: null,
      last_name: null,
      terms: terms,
      teacher: true,
      retailer_invitation_code: this.props.invitation_code,
      retailer_id: this.props.retailer.id
    })
    .done((response) =>
      @setState({done: true})
      #window.location.href = "/client#/jamclass"
      window.location.href = "/client#/profile/#{response.id}"
    ).fail((jqXHR) =>
      @setState({processing: false})
      if jqXHR.status == 422
        response = JSON.parse(jqXHR.responseText)
        if response.errors
          @setState({loginErrors: response.errors})
        else
          context.JK.app.notify({title: 'Unknown Signup Error', text: jqXHR.responseText})
      else
        context.JK.app.notifyServerError(jqXHR, "Unable to Sign Up")
    )
})