jam-cloud/web/app/assets/javascripts/react-components/TeacherProfile.js.jsx.coffee

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

SubjectStore = context.SubjectStore
InstrumentStore = context.InstrumentStore
LanguageStore = context.LanguageStore
GenreStore = context.GenreStore
UserStore = context.UserStore
AppStore = context.AppStore

profileUtils = context.JK.ProfileUtils

proficiencyCssMap = {
  "1": "proficiency-beginner",
  "2": "proficiency-intermediate",
  "3": "proficiency-expert"
};

proficiencyDescriptionMap = {
  "1": "BEGINNER",
  "2": "INTERMEDIATE",
  "3": "EXPERT"
};

@TeacherProfile = React.createClass({

  mixins: [
    Reflux.listenTo(AppStore, "onAppInit"),
    Reflux.listenTo(UserStore, "onUserChanged"),
    Reflux.listenTo(SubjectStore, "onSubjectsChanged"),
    Reflux.listenTo(GenreStore, "onGenresChanged"),
    Reflux.listenTo(InstrumentStore, "onInstrumentsChanged"),
    Reflux.listenTo(LanguageStore, "onLanguagesChanged")
  ]

  TILE_ABOUT: 'about'
  TILE_EXPERIENCE: 'experience'
  TILE_SAMPLES: 'samples'
  TILE_RATINGS: 'ratings'
  TILE_PRICES: 'prices'

  TILES: ['about', 'experience', 'samples', 'ratings', 'prices']

  onAppInit: (@app) ->
    @app.bindScreen('profile/teacher', {beforeShow: @beforeShow, afterShow: @afterShow})

  onSubjectsChanged: () ->
    @setState({subjects: true})

  onInstrumentsChanged: () ->
    @setState({instruments: true})

  onGenresChanged: () ->
    @setState({genres: true})

  onLanguagesChanged: () ->
    @setState({languages: true})

  beforeShow: (e) ->
    @setState({userId: e.id, user: null})
    rest.getUserDetail({
      id: e.id,
      show_teacher: true,
      show_profile: true
    }).done((response) => @userDetailDone(response)).fail(@app.ajaxError)

  userDetailDone: (response) ->
    if response.id == @state.userId
      @setState({user: response, isSelf: response.id == context.JK.currentUserId})


  afterShow: () ->

  getInitialState: () ->
    {
    userId: null,
    user: null,
    selected: @TILE_ABOUT,
    isSelf: false,
    subjects: false,
    instruments: false,
    genres: false,
    languages: false
    }

  onUserChanged: (userState) ->
    @user = userState?.user

  editProfile: (selected, e) ->
    e.preventDefault()
    logger.debug("edit profile requested for state " + selected)
    ProfileActions.startTeacherEdit(selected, true)

  editMusicProfile: (selected, e) ->
    e.preventDefault()
    logger.debug("edit music profile requested " + selected)
    ProfileActions.startProfileEdit(selected, true)

  editProfileLink: (text, selected) ->
    if @state.isSelf
      `<a className="edit-link" onClick={this.editProfile.bind(this, selected)}>{text}</a>`

  editMusicProfileLink: (text, selected) ->
    if @state.isSelf
      `<a className="edit-link" onClick={this.editMusicProfile.bind(this, selected)}>{text}</a>`


  teacherBio: (user, teacher) ->
    if teacher.biography?
      biography = teacher.biography
    else
      biography = 'No bio defined yet'

    biography = biography.replace(/\n/g, "<br/>")

    `<div className="section bio">
      <h3>Teacher Profile {this.editProfileLink('edit profile', 'introduction')}</h3>
      <div className="section-content">
        <div dangerouslySetInnerHTML={{__html: biography}}></div>
      </div>
    </div>`

  sampleVideo: (user, teacher) ->
    if teacher.introductory_video?
      videoUrl = teacher.introductory_video

      if videoUrl.indexOf(window.location.protocol) != 0
        console.log("replacing video")
        if window.location.protocol == 'http:'
          console.log("replacing https: " + videoUrl)
          videoUrl = videoUrl.replace('https://', 'http://')
          console.log("replaced : " + videoUrl)
        else
          videoUrl = videoUrl.replace('http://', 'https://')

        videoUrl = videoUrl.replace("watch?v=", "v/")


      return `<div className="section introductory-video">
        <h3>Intro Video</h3>

        <div className="section-content">
          <div className="video-wrapper">
            <div className="video-container">
              <iframe src={videoUrl} frameborder="0" allowfullscreen="allowfullscreen"/>
            </div>
          </div>
        </div>
      </div>`


  teachesInfo: (user, teacher) ->
    teachesInfo = []

    instruments = teacher.instruments.map((id) -> InstrumentStore.display(id))
    instrumentData = instruments.join(', ')
    teachesInfo.push(`<tr>
      <td>Instruments</td>
      <td>{instrumentData}</td>
    </tr>`)

    subjects = teacher.subjects.map((id) -> SubjectStore.display(id))
    subjectsData = subjects.join(', ')
    teachesInfo.push(`<tr>
      <td>Subjects</td>
      <td>{subjectsData}</td>
    </tr>`)

    genres = teacher.genres.map((id) -> GenreStore.display(id))
    genresData = genres.join(', ')
    teachesInfo.push(`<tr>
      <td>Genres</td>
      <td>{genresData}</td>
    </tr>`)

    levels = []
    if teacher.teaches_beginner
      levels.push('Beginner')
    if teacher.teaches_intermediate
      levels.push('Intermediate')
    if teacher.teaches_advanced
      levels.push('Advanced')
    levelsData = levels.join(', ')
    teachesInfo.push(`<tr>
      <td>Levels</td>
      <td>{levelsData}</td>
    </tr>`)

    ageData = '?'
    if teacher.teaches_age_lower == 0 && teacher.teaches_age_upper == 0
      ageData = 'Any'
    else if teacher.teaches_age_lower != 0 && teacher.teaches_age_upper != 0
      ageData = "#{teacher.teaches_age_lower} to #{teacher.teaches_age_upper}"
    else if teacher.teaches_age_lower == 0
      ageData = "Age #{teacher.teaches_age_upper} and younger"
    else if teacher.teaches_age_upper == 0
      ageData = "Ages #{teacher.teaches_age_lower} and up"
    teachesInfo.push(`<tr>
      <td>Ages</td>
      <td>{ageData}</td>
    </tr>`)

    languages = teacher.languages.map((id) -> LanguageStore.display(id))
    languagesData = languages.join(', ')
    teachesInfo.push(`<tr>
      <td>Languages</td>
      <td>{languagesData}</td>
    </tr>`)
    `<div className="section teachers">
      <h3>{this.state.user.first_name} Teaches {this.editProfileLink('edit teaching', 'basics')}</h3>

      <div className="section-content">
        <table className="jamtable" cellspacing="0" cellpadding="0" border="0">
          <tbody>
          {teachesInfo}
          </tbody>
        </table>
      </div>
    </div>`

  musicianBio: (user, teacher) ->

    if user.biography?
      musicianBio = user.biography
    else
      musicianBio = 'None specified.'

    musicianBio = musicianBio.replace(/\n/g, "<br/>")

    `<div className="section musician-bio">
      <h3>Musical Profile {this.editMusicProfileLink('update bio', '')}</h3>

      <div className="section-content" dangerouslySetInnerHTML={{__html: musicianBio}}></div>
    </div>`

  plays: (user, teacher) ->
    if user.profile.concert_count > 0
      gigs = "Has played #{profileUtils.gigMap[user.profile.concert_count]} concert gigs"
    else
      gigs = "Has played an unknown # of concert gigs"

    if user.profile.studio_session_count > 0
      studioSessions = "Has played #{profileUtils.gigMap[user.profile.studio_session_count]} studio sessions"
    else
      studioSessions = "Has played an unknown # of studio sessions"


    gigTable = `<table className="jamtable giginfo">
      <tbody>
      <tr>
        <td>{gigs}</td>
      </tr>
      <tr>
        <td>{studioSessions}</td>
      </tr>
      </tbody>
    </table>`

    display_instruments = []
    for instrument in user.instruments

      description = InstrumentStore.display(instrument.instrument_id)
      proficiency = instrument.proficiency_level;
      instrument_icon_url = context.JK.getInstrumentIcon256(instrument.instrument_id);
      display_instruments.push(`<div className="profile-instrument">
        <img src={instrument_icon_url} width="70" height="70"/><br />
        <span>{description}</span><br />
        <span className={proficiencyCssMap[proficiency]}>{proficiencyDescriptionMap[proficiency]}</span>
      </div>`)

    `<div className="section plays">
      <h3>{this.state.user.first_name} Plays {this.editMusicProfileLink('update instruments', 'experience')}</h3>

      <div className="section-content">
        {display_instruments}
        {gigTable}
      </div>
      <br className="clearall"/>
    </div>`

  createPresence: (className, url, img) ->
    `<div className={className + "-presence logo online-presence-option"}>
      <a href={url}><img className="logo" src={img}/></a>
    </div>`


  onlinePresences: (user, teacher) ->
    online_presences = user.profile.online_presences

    presences = []

    if user.profile.website
      # make sure website is rooted
      website = user.profile.website
      if website.indexOf('http') == -1
        website = 'http://' + website
      presences.push(@createPresence("user-website", website, "/assets/content/website-logo.png"))

    matches = profileUtils.soundCloudPresences(online_presences)
    if matches.length > 0
      presences.push(@createPresence("soundcloud", "http://www.soundcloud.com/#{matches[0].username}",
        "/assets/content/soundcloud-logo.png"))

    matches = profileUtils.reverbNationPresences(online_presences)
    if matches.length > 0
      presences.push(@createPresence("reverbnation", "http://www.reverbnation.com/#{matches[0].username}",
        "/assets/content/reverbnation-logo.png"))

    matches = profileUtils.bandCampPresences(online_presences)
    if matches.length > 0
      presences.push(@createPresence("bandcamp", 'http://' + matches[0].username + '.bandcamp.com/',
        "/assets/content/bandcamp-logo.png"))

    matches = profileUtils.fandalismPresences(online_presences)
    if matches.length > 0
      presences.push(@createPresence("fandalism", 'http://www.fandalism.com/' + matches[0].username,
        "/assets/content/fandalism-logo.png"))

    matches = profileUtils.youTubePresences(online_presences)
    if matches.length > 0
      presences.push(@createPresence("youtube", 'http://www.youtube.com/' + matches[0].username,
        "/assets/content/youtube-logo.png"))

    matches = profileUtils.facebookPresences(online_presences)
    if matches.length > 0
      presences.push(@createPresence("facebook", 'http://www.facebook.com/' + matches[0].username,
        "/assets/content/facebook-logo.png"))

    matches = profileUtils.twitterPresences(online_presences)
    if matches.length > 0
      presences.push(@createPresence("twitter", 'http://www.twitter.com/' + matches[0].username,
        "/assets/content/twitter-logo.png"))

    if presences.length == 0
      presences = `<div className="no-online-presence">None specified</div>`


    `<div className="section plays">
      <h3>Online Presence {this.editMusicProfileLink('update presence', 'samples')}</h3>

      <div className="section-content">
        {presences}
      </div>
    </div>`

  about: () ->
    user = @state.user
    teacher = user.teacher

    `<div className="about-block info-block">
      {this.sampleVideo(user, teacher)}

      {this.teacherBio(user, teacher)}

      {this.teachesInfo(user, teacher)}

      {this.musicianBio(user, teacher)}

      {this.plays(user, teacher)}

      {this.onlinePresences(user, teacher)}
    </div>`

  experiences: (title, attr, update, user, teacher) ->
    teachingExperiences = []

    for teachingExperience in teacher['experiences_' + attr]
      years = ''
      if teachingExperience.start_year > 0
        if teachingExperience.end_year && teachingExperience.end_year > 0
          years = "#{teachingExperience.start_year} - #{teachingExperience.end_year}"
        else
        years = "#{teachingExperience.start_year} - Present"

      teachingExperiences.push(`<div className="experience">
        <div className="years">{years}</div>
        <h4>{teachingExperience.name}</h4>

        <div className="org">{teachingExperience.organization}</div>
      </div>`)

    if update?
      updateLink = this.editProfileLink('update ' + update, 'experience')

    if teachingExperiences.length == 0
      teachingExperiences = `<div>None specified</div>`
    `<div className="section teaching-experience">
      <h3>{title} {updateLink}</h3>

      <div className="section-content">
        {teachingExperiences}
      </div>
    </div>`

  sampleClicked: (e) ->
    e.preventDefault()
    context.JK.popExternalLink($(e.target).attr('href'))


  musicSamples: (user, teacher) ->
    performance_samples = user.profile.performance_samples

    jamkazamSamples = []
    samples = profileUtils.jamkazamSamples(performance_samples);
    for sample in samples
      jamkazamSamples.push(`<a className="jamkazam-playable playable" href={"/recordings/" + sample.claimed_recording.id} onClick={this.sampleClicked}>{sample.claimed_recording.name}</a>`)

    soundCloudSamples= []
    samples = profileUtils.soundCloudSamples(performance_samples);
    for sample in samples
      soundCloudSamples.push(`<a className="sound-cloud-playable playable" href={sample.url} onClick={this.sampleClicked}>{sample.description}</a>`)

    youTubeSamples = []
    samples = profileUtils.youTubeSamples(performance_samples);
    for sample in samples
      youTubeSamples.push(`<a className="youtube-playable playable" href={sample.url} onClick={this.sampleClicked}>{sample.description}</a>`)

    sampleJsx = []

    if jamkazamSamples.length > 0
      sampleJsx.push(`<div className="jamkazam-samples logo performance-sample-option">
        <img className="logo" src="/assets/header/logo.png" />
        {jamkazamSamples}
      </div>`)

    if soundCloudSamples.length > 0
      sampleJsx.push(`<div className="soundcloud-samples logo performance-sample-option">
        <img className="logo" src="/assets/content/soundcloud-logo.png" />
        {soundCloudSamples}
      </div>`)

    if youTubeSamples.length > 0
      sampleJsx.push(`<div className="youtube-samples logo performance-sample-option">
        <img className="logo" src="/assets/content/youtube-logo.png" />
        {youTubeSamples}
      </div>`)


    `<div className="section samples">
        <h3>Performance Samples {this.editMusicProfileLink('update samples', 'samples')}</h3>

        <div className="section-content">
          {sampleJsx}
        </div>
      </div>`

  experience: () ->
    user = @state.user
    teacher = user.teacher

    `<div className="experience-block info-block">
      {this.experiences('Teaching Experience', 'teaching', 'experience', user, teacher)}

      {this.experiences('Music Education', 'education', null, user, teacher)}

      {this.experiences('Music Awards', 'award', null, user, teacher)}
    </div>`

  samples: () ->
    user = @state.user
    teacher = user.teacher

    `<div className="samples-block info-block">
      {this.musicSamples(user, teacher)}
    </div>`

  ratings: () ->
    user = @state.user
    teacher = user.teacher

    `<div className="ratings-block info-block">
      Coming Soon!
    </div>`

  prices: () ->
    user = @state.user
    teacher = user.teacher

    rows = []

    for minutes in [30, 45, 60, 90, 120]
      lesson_price = teacher["price_per_lesson_#{minutes}_cents"]
      monthly_price = teacher["price_per_month_#{minutes}_cents"]
      duration_enabled = teacher["lesson_duration_#{minutes}"]

      console.log("lesson_price", lesson_price)
      console.log("monthly_price", monthly_price)
      console.log("duration neabled", duration_enabled)
      if duration_enabled && teacher.prices_per_lesson && lesson_price? && lesson_price > 0
        lessonPriceFormatted = '$ ' + (lesson_price / 100).toFixed(2)
      else
        lessonPriceFormatted = 'N/A'

      if duration_enabled && teacher.prices_per_month && monthly_price? && monthly_price > 0
        monthlyPriceFormatted = '$ ' + (monthly_price / 100).toFixed(2)
      else
        monthlyPriceFormatted = 'N/A'

      rows.push(`<tr><td>{minutes + " Minutes"}</td><td>{lessonPriceFormatted}</td><td>{monthlyPriceFormatted}</td></tr>`)

    `<div className="prices-block info-block">
      <h3>Lesson Prices {this.editProfileLink('update prices', 'pricing')}</h3>

      <div className="section-content">
        <table className="jamtable price-table">
          <thead>
            <tr><th>LESSON LENGTH</th><th>PRICE PER LESSON</th><th>PRICE PER MONTH</th></tr>
          </thead>
          <tbody>
          {rows}
          </tbody>
        </table>
      </div>
    </div>`

  mainContent: () ->
    if @state.selected == @TILE_ABOUT
      @about()
    else if @state.selected == @TILE_EXPERIENCE
      @experience()
    else if @state.selected == @TILE_SAMPLES
      @samples()
    else if @state.selected == @TILE_RATINGS
      @ratings()
    else if @state.selected == @TILE_PRICES
      @prices()

  profileLeft: () ->
    `<div className="profile-about-left">
      <div className="left-content">
        <div className="location">
          <div className="city">{this.state.user.city}</div>
          <div className="state">{this.state.user.state}</div>
          <div className="country">{this.state.user.country}</div>
          <div className="age">{this.state.user.age} years old</div>
        </div>

        <div className="activity">
          <div className="last-signed-in">Last Signed In:</div>
          <div>{"very recently"}</div>
        </div>

        <div className="backgroundCheck">
          <div className="background-check">Background Check:</div>
          <div className="last-verified">last verified</div>
          <div className="last-verified-time">3 months ago</div>
        </div>
      </div>
    </div>`

  selectionMade: (selection, e) ->
    e.preventDefault()

    @setState({selected: selection})

  render: () ->
    if @state.user?
      avatar = context.JK.resolveAvatarUrl(@state.user.photo_url);
    if @state.user?.teacher?
      mainContent = @mainContent()
      profileLeft = @profileLeft()

    editButton = `<a href="/client#/account/profile" className="button-orange edit-profile-btn hidden">EDIT PROFILE</a>`
    actionButtons = `<div className="right hidden">
      <a id="btn-add-friend" className="button-orange">ADD FRIEND</a>
      <a id="btn-follow-user" className="button-orange">FOLLOW</a>
      <a id="btn-message-user" className="button-orange">MESSAGE</a>
    </div>`
    profileSelections = []

    for tile, i in @TILES
      classes = classNames({last: i == @TILES.length - 1, active: @state.selected == tile})

      profileSelections.push(`<div className="profile-tile"><a className={classes}
                                                               onClick={this.selectionMade.bind(this, tile)}>{tile}</a>
      </div>`)

    `<div className="content-body-scroller">
      <div className="profile-header profile-head">

        <div className="user-header">
          <h2 id="username"></h2>
          {editButton}
        </div>

        {actionButtons}
        <br clear="all"/><br />

        <div className="profile-photo">
          <div className="avatar-profile">
            <img width="200" height="200" src={avatar}/>
          </div>
        </div>

        <div className="profile-nav">
          {profileSelections}
        </div>
        <div className="clearall"></div>
      </div>

      <div className="profile-body">
        <div className="profile-wrapper">
          {profileLeft}
          <div className="main-content">
            {mainContent}
          </div>

        </div>
      </div>
    </div>`
})