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

@FindSessionRow = React.createClass({

  createInstrument: (participant) ->

    instruments = []
    existingTracks = []
    for j in [0 .. participant.tracks.length]

      track = participant.tracks[j]

      if existingTracks.indexOf(track.instrument_id) < 0
        existingTracks.push(track.instrument_id)
        logger.debug("Find:Finding instruments. Participant tracks:", participant.tracks)
        inst = context.JK.getInstrumentIcon24(track.instrument_id)
        instruments.push(`<img title={context.JK.getInstrumentId(track.instrument_id)} hoveraction="instrument" data-instrument-id={track.instrument_id} src={inst} width="24" height="24" />`)

    instruments


  createInSessionUser: (participant) ->

    instruments = @createInstrument(participant)
    id = participant.user.id;
    name = participant.user.name;
    userId = id
    avatar_url = context.JK.resolveAvatarUrl(participant.user.photo_url)
    profile_url = "/client#/profile/" + id
    musician_name = name
    more_link = ''

    `<tr>
        <td width="24">
            <a user-id={userId} hoveraction="musician" href={profile_url} className="avatar-tiny">
                <img src={avatar_url} />
            </a>
        </td>
        <td>
            <a user-id={userId} hoveraction="musician" href={profile_url}>{musician_name}</a>
        </td>
        <td>
            <div className="instruments nowrap">{instruments}</div>
        </td>
        <td>{more_link}&nbsp;</td>
    </tr>`


  createOpenSlot:(slot) ->


    ` <tr>
        <td width="24">
            <img src="{instrument_url}" />
        </td>
        <td>
            <div className="instruments nowrap">{instrument} ({proficiency})</div>
        </td>
        <td>{more_link}&nbsp;</td>
    </tr>`

  createRsvpUser: (user, session, isLast) ->
    instrumentLogoHtml = []

    if user.instrument_list
      for j in [0 .. user.instrument_list.length]
        instrument = user.instrument_list[j];
        inst = context.JK.getInstrumentIcon24(instrument.id);
        instrumentLogoHtml.push(`<img title={context.JK.getInstrumentId(instrument.id)} hoveraction="instrument" data-instrument-id={instrument.id} src={inst} width="24" height="24" />`)

    moreLinkHtml = '';
    if isLast
      moreLinkHtml = `<span><a class="rsvps more">more</a><a className="details-arrow arrow-down-orange"></a></span>`

    instruments = @createInstrument(user)
    id = participant.user.id;
    name = participant.user.name;
    userId = id
    avatar_url = context.JK.resolveAvatarUrl(participant.user.photo_url)
    profile_url = "/client#/profile/" + id
    musician_name = name
    more_link = ''

    `<tr>
        <td width="24">
            <a user-id={userId} hoveraction="musician" href={profile_url} className="avatar-tiny">
                <img src={avatar_url} />
            </a>
        </td>
        <td>
            <a user-id={userId} hoveraction="musician" href={profile_url}>{musician_name}</a>
        </td>
        <td>
            <div className="instruments nowrap">{instruments}</div>
        </td>
        <td>{more_link}&nbsp;</td>
    </tr>`



  inSessionUsersHtml: (session) ->
    inSessionUsers = []

    result = []
    if session.active_music_session && "participants" in session.active_music_session && session.active_music_session.participants.length > 0
      for i in [0 .. session.active_music_session.participants.length]
        participant = session.active_music_session.participants[i]
        inSessionUsers.push(participant.user.id);
        result.push(@createInSessionUser(participant))

    return [result, inSessionUsers]


  createRsvpUsers:( ) ->

    session = @props.session

    firstResults = []
    lastResults = []

    approvedRsvpCount = session.approved_rsvps.length

    if session.approved_rsvps
      first = session.approved_rsvps.slice(0, 3)
      last = session.approved_rsvps.slice(3)

      for i in [0..first]
        user = first[i]
        firstResults.push(@createRsvpUser(user, session, approvedRsvpCount > 3 && i == 2))
      for i in [0..last]
        user = last[i]
        lastResults.push(@createRsvpUser(user, session, false))

    [firstResults, lastResults]



  createOpenSlots: () ->
    session = @prop.session

    firstResults = []
    remainingResults = []

    if session['is_unstructured_rsvp?']
      firstResults.push(@createOpenSlot({description: 'Any Instrument'}))

    if session.open_slots
      openSlotCount = session.open_slots.length
      for i in [0 .. openSlotCount]
        openSlot = session.open_slots[i]
        if i < 3
          firstResults.push(@createOpenSlot(session.open_slots[i], openSlotCount > 3 && i == 2))
        else
          remainingResults.push(@createOpenSlot(session.open_slots[i], false))

    return [firstResults, remainingResults]

  showJoinLinks: (inSessionUsers) ->
    session = @prop.session
    showJoinLink = session.musician_access
    if session.approved_rsvps
      approvedRsvpCount = session.approved_rsvps.length
      for i in [0 .. approvedRsvpCount]
        # do not show the user in this section if he is already in the session
        if $.inArray(session.approved_rsvps[i].id, inSessionUsers) == -1
          if session.approved_rsvps[i].id == context.JK.currentUserId
            showJoinLink = true
        else
          showJoinLink = true

    showJoinLink


  render: () ->

    session = @props.session

    id = session.id
    name = session.name
    description = session.description || "(No description)"
    genres = '(' + session.genres.join (', ') + ')'
    [in_session_musicians, inSessionUsers] = @inSessionUsersHtml()
    [rsvp_musicians_first_3, rsvp_musicians_remaining] = @createRsvpUsers()
    [open_slots_first_3, open_slots_remaining] = @createOpenSlots()
    showJoinLink = @showJoinLink(inSessionUsers)
    showListenLink = session.fan_access && session.active_music_session && session.active_music_session.mount
    join_link_display_style = {display: "none"}
    listen_link_display_style = {display: "none"}
    if showJoinLink
        join_link_display_style = {display: "block"}
    if showListenLink
        listen_link_display_style = {display: "inline-block"}
    listen_link_text = ''

    if !session.fan_access
      listen_link_text = ''
    else if session.active_music_session && session.active_music_session.mount
      listen_link_text = 'Listen'
    else
      listen_link_text = '';


    `<tr data-session-id={id} className="found-session">
      <td width="30%">
          <table className="musician-groups" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                  <td className="bold"><a href={"/sessions/" + id} rel="external">{name}</a></td>
                  <td align="right" width="75">{genres}</td>
              </tr>
              <tr>
                  <td colspan="2">{description}</td>
              </tr>
          </table>
      </td>
      <td width="35%">
          <table className="musicians" cellpadding="0" cellspacing="0">
              <tr>
                  <td>In Session:</td>
                  <td>
                      <table className="musicians" cellpadding="0" cellspacing="0" width="100%">
                          {in_session_musicians}
                      </table>
                  </td>
              </tr>
              <tr>
                  <td>RSVPs:</td>
                  <td>
                      <table className="musicians" cellpadding="0" cellspacing="0" width="100%">
                          {rsvp_musicians_first_3}
                      </table>
                      <div style="display:none;">
                          <table className="musicians" cellpadding="0" cellspacing="0" width="100%">
                              {rsvp_musicians_remaining}
                          </table>
                      </div>
                  </td>
              </tr>
              <tr>
                  <td>Still Needed:</td>
                  <td>
                      <table className="musicians" cellpadding="0" cellspacing="0">
                          {open_slots_first_3}
                      </table>
                      <div style="display:none">
                          <table className="musicians" cellpadding="0" cellspacing="0">
                              {open_slots_remaining}
                          </table>
                      </div>
                  </td>
              </tr>
          </table>
      </td>
      <td width="30%" className="latency">
          <div className="center">
              <a className="listen-link" style="display:{listen_link_display_style};">
                  <img className="listen-icon" />
              </a>
              <br/>
              <span className="listen-link-details"><span className="listen-link-text">{listen_link_text}</span><a href="#" className="listen-detail-hover">?</a></span>
          </div>
          <div className="center">
              <a className="join-link" style="display:{join_link_display_style};">
                  <img className="join-icon" />
              </a>
              <span className="join-link-text">Join</span>
          </div>

      </td>
    </tr>`
})