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

@GiftCardLandingPage = React.createClass({

  render: () ->

    if this.state.done
      ctaButtonText10 = 'sending you in...'
      ctaButtonText20 = 'sending you in...'
    else if this.state.processing
      ctaButtonText10 = 'hold on...'
      ctaButtonText20 = 'hold on...'
    else
      ctaButtonText10 = `<span>ADD $10 CARD<br/>TO CART</span>`
      ctaButtonText20 = `<span>ADD $20 CARD<br/>TO CART</span>`


    ctaButtons =
      `<div className="cta-buttons">
        <button className={classNames({'five-jt': true, 'gift-card': true, 'cta-button' : true, 'processing': this.state.processing})} onClick={this.ctaClick.bind(this, 5)}>{ctaButtonText10}</button>
        <button className={classNames({'ten-jt': true,  'gift-card': true, 'cta-button' : true, 'processing': this.state.processing})} onClick={this.ctaClick.bind(this, 10)}>{ctaButtonText20}</button>
      </div>`


    `<div className="top-container">
      <div className="full-row name-and-artist">
        <div>
          <img className="gift-card-preview" width="300" height="191" src="/assets/landing/gift_card.png" alt="gift card "/>
          <h1 className="jam-track-name">$10 or $20 JAMTRACKS GIFT CARDS</h1>
          <h2 className="original-artist">A PERFECT GIFT FOR MUSICIANS</h2>
          <div className="clearall"/>
        </div>
        <div className="preview-and-action-box">
          <img src="/assets/landing/jamtrack_landing_arrow_1.png" className="arrow1" />
          <img src="/assets/landing/jamtrack_landing_arrow_2.png" className="arrow2" />
          <div className="preview-jamtrack-header gift-card">
            Preview A JamTrack
            <div className="jamtrack-title">"{this.props.jam_track.name}"</div>
          </div>
          <div className={classNames({'preview-area': true, 'gift-card': true})}>
            <p>Click the play buttons below to preview the master mix and 20-second samples of all the isolated tracks.</p>
            <div className="tracks previews">

            </div>
            <p className="gift-getter">
              Get a $10 gift card (good for 5 songs) or a $20 gift card (good for 10 songs), and your happy
              gift card getter can choose their favorites from our catalog of 3,700+ popular songs.
            </p>
            {ctaButtons}
            <a className="browse-all" href="/client?search=#/jamtrack/search">or browse our catalog of 3,700+ songs</a>
          </div>
        </div>
      </div>
      <div className="row summary-text">
        <p className="top-summary">
          JamTracks by JamKazam are the best way to play along with your favorite songs. Far better and different than traditional
          backing tracks, our JamTracks are complete multi-track professional recordings, with fully isolated tracks for each part of the music.
          And our free app and Internet service are packed with features that give you unmatched creative freedom to learn, practice, record, play with others, and share your performances.
        </p>
      </div>
    </div>`

  getInitialState: () ->
    {processing:false}

  componentDidMount:() ->
    $root = $(this.getDOMNode())

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

    return if @state.processing

    loggedIn = context.JK.currentUserId?

    rest.addGiftCardToShoppingCart({id: card_type}).done((response) =>

      if loggedIn
        @setState({done: true})
        context.location = '/client#/shoppingCart'
      else
        @setState({done: true})
        context.location = '/client#/shoppingCart'

    ).fail((jqXHR, textStatus, errorMessage) =>
      if jqXHR.status == 422
        errors = JSON.parse(jqXHR.responseText)
        cart_errors = errors?.errors?.cart_id
        context.JK.app.ajaxError(jqXHR, textStatus, errorMessage)
        @setState({processing:false})
    )
})