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

UserStore = context.UserStore

@TestDriveSelection = React.createClass({

  mixins: [
    Reflux.listenTo(AppStore, "onAppInit"),
    Reflux.listenTo(UserStore, "onUserChanged")
  ]

  onAppInit: (@app) ->
    @app.bindScreen('jamclass/test-drive-selection',
      {afterShow: @afterShow, beforeHide: @beforeHide, navName: 'TestDrive Selection'})

  onUserChanged: (userState) ->
    @setState({user: userState?.user})

  beforeHide: (e) ->

  afterShow: (e) ->
    logger.debug("TestDriveSelection: afterShow", e.id)

    parsed = @parseId(e.id)

    id = parsed.id

    if id? && id != 'none' && id != 'default'
      @setState({teacherId: id, teacher: null})
    else
      @setState({teacherId: null, teacher: null})

    rest.getUserDetail({
      id: id,
      show_teacher: true
    }).done((response) => @userDetailDone(response)).fail(@app.ajaxError)

  parseId: (id) ->
    if !id?
      {id: null}
    else
      {id: id}

  userDetailDone: (response) ->
    if response.id == @state.teacherId
      @setState({teacher: response, isSelf: response.id == context.JK.currentUserId})
    else
      logger.debug("TestDriveSelection: ignoring teacher details", response.id, @state.teacherId)

  getInitialState: () ->
    {
    user: null,
    teacher: null,
    teacherId: null,
    }

  packageSelect: (packageType, e) ->
    e.preventDefault()

    logger.debug("user selected test-drive-#{packageType}")
    rest.updateUser({desired_package: "test-drive-#{packageType}"}).done((response) => @packageSelectedDone(response)).fail((jqXHR) => @packageSelectedFail(jqXHR))


  packageSelectedFail: (jqXHR) ->
    console.log("package selected fail: " + jqXHR.responseText)
    @app.ajaxError(jqXHR)

  packageSelectedDone:(response) ->

    url = "/client#/jamclass/book-lesson/test-drive"

    if @state.teacher?
      url +=  '_' + @state.teacher.id
    else
      url = "/client#/jamclass/lesson-payment/test-drive"

    window.location.href = url

  avatar: (name = 'your choice', photo_url = '/assets/shared/avatar_generic.png') ->
    `<div className="avatar-header">
      <div className="avatar">
        <img src={photo_url}/>
      </div>
    </div>`
  render: () ->
    teacher_name = @state.teacher?.name
    photo_url = @state.teacher?.photo_url
    if !photo_url?
      photo_url = '/assets/shared/avatar_generic.png'

    `<div className="content-body-scroller">
      <Nav/>

      <div className="selection-area">
        <div className="test-drive-selection-wrapper select-4">
          <div className="test-drive-selection">
            <div className="td-header">MOST POPULAR</div>
            <div className="td-content">
              <div className="avatars">
                {this.avatar(teacher_name, photo_url)}
                {this.avatar()}
                {this.avatar()}
                {this.avatar()}
              </div>
              <div className="td-msg">
                GET 4 LESSONS WITH 4 DIFFERENT TEACHERS FOR JUST $12.50 EACH
              </div>
              <div className="td-desc">
                You wouldn't marry the first person you date - right? Choosing the right teacher is the most important
                thing you can do to ensure success and become a better musician. Try 4 different teachers. Then pick the
                one
                who is best for YOU!
              </div>
            </div>
          </div>
          <a className="button-orange select-4 select-package" onClick={this.packageSelect.bind(this, '4')}>SELECT</a>

          <div className="price-notice">Just $49.99!</div>
        </div>


        <div className="test-drive-selection-wrapper select-2">
          <div className="test-drive-selection">
            <div className="td-header">GREAT VALUE</div>
            <div className="td-content">
              <div className="avatars">
                {this.avatar(teacher_name, photo_url)}
                {this.avatar()}
              </div>
              <div className="td-msg">
                GET 2 LESSONS<br/>FOR THE PRICE OF 1
              </div>
              <div className="td-desc">
                Want to try more than one teacher, but 4 is too many for you? Try two lessons with two different
                teachers for the price of one lesson.
                A great value, and a good way to find an excellent teacher!
              </div>
            </div>
          </div>
          <a className="button-orange select-2 select-package" onClick={this.packageSelect.bind(this, '2')}>SELECT</a>

          <div className="price-notice">Just $29.99!</div>
        </div>

        <div className="test-drive-selection-wrapper select-1">
          <div className="test-drive-selection">
            <div className="td-header">I'M SURE</div>
            <div className="td-content">
              <div className="avatars">
                {this.avatar(teacher_name, photo_url)}
              </div>
              <div className="td-msg">
                GET 1 HALF-PRICE LESSON<br/>TO GET STARTED
              </div>
              <div className="td-desc">
                Are you confident you've found the best teacher for you? Then book your first lesson at a terrific
                value, and get your first lesson scheduled to start learning more today!
              </div>
            </div>

          </div>
          <a className="button-orange select-1 select-package" onClick={this.packageSelect.bind(this, '1')}>SELECT</a>

          <div className="price-notice">Just $14.99!</div>
        </div>
        <br className="clearall"/>

      </div>
    </div>`
})