context = window
RecordingActions = @RecordingActions

@SessionRecordBtn = React.createClass({

  mixins: [Reflux.listenTo(@MixerStore,"onSessionMixerChange")]

  onSessionMixerChange: (sessionMixers) ->

    this.setState({isRecording: sessionMixers.session.isRecording})

  getInitialState: () ->
    {childWindow: null, isRecording: false}

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

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

  openRecording: () ->

    canRecord = window.SessionStore.canRecord()
    if canRecord
      RecordingActions.openRecordingControls()
    else
      buttons = []
      buttons.push({name: 'CLOSE', buttonStyle: 'button-grey'})
      buttons.push({name: 'COMPARE PLANS', buttonStyle: 'button-grey', click: (() => (@openBrowserToPlanComparison()))})
      buttons.push({
        name: 'UPGRADE PLAN',
        buttonStyle: 'button-orange',
        click: (() => (@openBrowserToPayment()))
      })
      context.JK.Banner.show({
        title: "Your Current Plan Does Not Allow Recording",
        html: context._.template($('#template-plan-no-record').html(), {}, { variable: 'data' }),
        buttons: buttons})

  render: () ->
    `<a className="session-record button-grey left" data-is-recording={this.state.isRecording} onClick={this.openRecording}>
      <img src="/assets/content/icon_record.png" align="texttop" height="14" width="14"/>
      RECORD
    </a>`
})