context = window

@SubscriptionConcern = React.createClass({
  displayName: 'SubscriptionConcern'

  getTimeRemaining: (t) ->

    if t < 0
      t = -t

    seconds = Math.floor( (t/1000) % 60 );
    minutes = Math.floor( (t/1000/60) % 60 );
    hours = Math.floor( (t/(1000*60*60)) % 24 );
    days = Math.floor( t/(1000*60*60*24) );

    return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
    };


  displayTime: () ->
    if false
      # offset time by 10 minutes to get the 'you need to wait message' in
      untilTime = @getTimeRemaining(@props.subscription.until.total + (10 * 60 * 1000))
    else
      untilTime = @props.subscription.until
    timeString = ''
    if untilTime.days != 0
      timeString += "#{untilTime.days} days, "
    if untilTime.hours != 0 || timeString.length > 0
      timeString += "#{untilTime.hours} hours, "
    if untilTime.minutes != 0 || timeString.length > 0
      timeString += "#{untilTime.minutes} minutes, "
    if untilTime.seconds != 0 || timeString.length > 0
      timeString += "#{untilTime.seconds} seconds"

    if timeString == ''
      'now!'
    timeString

  openBrowserToPayment: (e) ->
    context.JK.popExternalLink("/client#/account/subscription", true)
    e.preventDefault();

  openBrowserToPlanComparison: (e) ->
    context.JK.popExternalLink("https://jamkazam.freshdesk.com/support/solutions/articles/66000122535-what-are-jamkazam-s-free-vs-premium-features-")
    e.preventDefault();
    return 'noclose'


  render: () ->
    content = null
    if @props.subscription.participants > 1
      if @props.subscription.until.total < 60000
        content = `<div className="message">
            <p>You have run out of time.</p>
            <p><a href="#" onClick={this.openBrowserToPlanComparison}>Compare plans</a> and consider <a href="/client#/account/subscription" onClick={this.openBrowserToPayment}>upgrading your plan</a> for more play time and premium features.</p>
        </div>`
      else
        if @props.subscription.main_concern_type == 'remaining_session_play_time'
          content = `<div className="message">
            <p>You will run out play time for this session in:</p>
            <p className="time">{this.displayTime()}</p>
              <p><a href="#" onClick={this.openBrowserToPlanComparison}>Compare plans</a> and consider <a href="/client#/account/subscription" onClick={this.openBrowserToPayment}>upgrading your plan</a> for more play time and premium features.</p>
          </div>`
        else
          content = `<div className="message">
              <p>You will run out of monthly play time in:</p>
              <p className="time">{this.displayTime()}</p>
              <p><a href="#" onClick={this.openBrowserToPlanComparison}>Compare plans</a> and consider <a href="/client#/account/subscription" onClick={this.openBrowserToPayment}>upgrading your plan</a> for more play time and premium features.</p>
          </div>`

    if content?
      `<div className="broadcast-notification subscription">
        {content}
      </div>`
    else
      `<div></div>`

})