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

@FindSessionRow = React.createClass({

  createInstrument: (participant) ->

    instruments = []
    existingTracks = []
    logger.debug("Find:Finding instruments. Participant tracks:", participant.tracks)
    for track in participant.tracks

      if existingTracks.indexOf(track.instrument_id) < 0
        existingTracks.push(track.instrument_id)
        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) ->

    inst = context.JK.getInstrumentIcon24(slot.instrument_id);

    proficiency_desc = slot.proficiency_desc
    if !proficiency_desc
      # this is to allow unstructured RSVPs to not specify proficiency_desc
      proficiency_desc = "Any Skill Level"

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

    instrument_url = inst
    instrument = slot.description
    proficiency = proficiency_desc
    more_link = moreLinkHtml


    `<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) ->
    instruments = []

    if user.instrument_list
      for instrument in user.instrument_list
        inst = context.JK.getInstrumentIcon24(instrument.id);
        instruments.push(`<img title={context.JK.getInstrumentId(instrument.id)} hoveraction="instrument" data-instrument-id={instrument.id} key={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 = user.id;
    name = user.name;
    userId = id
    avatar_url = context.JK.resolveAvatarUrl(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 = []
    console.log("render active", session)
    if session.active_music_session && session.active_music_session.participants && session.active_music_session.participants.length > 0
      for participant in session.active_music_session.participants
        inSessionUsers.push(participant.user.id);
        result.push(@createInSessionUser(participant))

    return [result, inSessionUsers]


  createRsvpUsers:(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 approved_rsvp in first
        firstResults.push(@createRsvpUser(approved_rsvp, session, approvedRsvpCount > 3 && i == 2))
      for approved_rsvp in last
        lastResults.push(@createRsvpUser(approved_rsvp, session, false))

    [firstResults, lastResults]



  createOpenSlots: (session) ->

    firstResults = []
    remainingResults = []

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

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

    return [firstResults, remainingResults]

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

    showJoinLink

  rsvps: (session, rsvp_musicians_first_3, rsvp_musicians_remaining) ->

    if session.create_type == 'quick-start' || !rsvp_musicians_first_3 || rsvp_musicians_first_3.length == 0
      return null

    ` <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>`

  render: () ->

    session = @props.session

    id = session.id
    name = session.name
    description = session.description || "(No description)"
    genres = '(' + session.genres.join (', ')
    genres += ')'
    [in_session_musicians, inSessionUsers] = @inSessionUsersHtml(session)
    [rsvp_musicians_first_3, rsvp_musicians_remaining] = @createRsvpUsers(session)
    [open_slots_first_3, open_slots_remaining] = @createOpenSlots(session)
    showJoinLink = @showJoinLink(session, 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 = '';

    rsvps = @rsvps(rsvp_musicians_first_3, rsvp_musicians_remaining)

    `<tr data-session-id={id} className="found-session">
      <td width="40%" className="session-cell">
          <table className="musician-groups" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                  <td className="bold"><a className="session-name" href={"/sessions/" + id} rel="external">{name}</a></td>
                  <td align="right" width="75" className="session-genre">{genres}</td>
              </tr>
              <tr>
                  <td colspan="2" className="session-description">{description}</td>
              </tr>
          </table>
          <div className="spacer"></div>
      </td>
      <td width="45%" className="session-musicians">
          <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>
              {rsvps}
          </table>
          <div className="spacer"></div>
      </td>
      <td width="10%" className="actions">
          <div className="center">
              <a className="listen-link" style={listen_link_display_style}>
                  <div className="listen-icon"></div>
              </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={join_link_display_style}>
                  <div className="join-icon"></div>
              </a>
              <span className="join-link-text">Join</span>
          </div>
          <div className="spacer"></div>

      </td>
    </tr>`
})