context = window
logger = context.JK.logger

NoVideoRecordActive = 0
WebCamRecordActive = 1
ScreenRecordActive = 2

mixins = []

# make sure this is actually us opening the window, not someone else (by checking for MixerStore)

# this check ensures we attempt to listen if this component is created in a popup
reactContext = if window.opener? then window.opener else window

accessOpener = false
if window.opener?
  try
    m = window.opener.MixerStore
    accessOpener = true
  catch e
    reactContext = window

MixerStore = reactContext.MixerStore
RecordingStore = reactContext.RecordingStore
VideoStore = reactContext.VideoStore

if accessOpener
  mixins.push(Reflux.listenTo(RecordingStore,"onRecordingStateChanged"))
  # mixins.push(Reflux.listenTo(MixerStore,"onMixersChanged"))

@PopupRecordingStartStop = React.createClass({

  mixins: mixins

  #onMixersChanged: (mixers) ->
  #  this.setState(chatMixer: mixers.chatMixer)

  onRecordingStateChanged: (recordingState) ->
    if @unloaded
      #console.log("PopupMediaControls unloaded. ignore onMixersChnaged")
      return

    this.setState(isRecording: recordingState.isRecording, recordedOnce: this.state.recordedOnce || recordingState.isRecording)

  startStopRecording: () ->
    if this.state.isRecording
      window.opener.RecordingActions.stopRecording()
    else
      recordChat = false
      recordVideo = NoVideoRecordActive

      $root = $(this.getDOMNode())

      if @inputType != 'audio-only'

        if $root.find('#recording-selection').val() == 'video-window'
          recordVideo = ScreenRecordActive
        else
          recordVideo = WebCamRecordActive


      recordChat = $root.find('#include-chat').is(':checked')


      # if the video window isn't open, but a video option was selected...
      if recordVideo != NoVideoRecordActive && !VideoStore.videoShared
        logger.debug("prevent video from opening", VideoStore)
        context.JK.prodBubble($root.find('.control'), 'video-window-not-open', {}, {positions:['bottom']})
        return
      logger.debug("@inputType, @udiotye", recordChat, recordVideo)
      window.opener.RecordingActions.startRecording(recordVideo, recordChat)

  onNoteShowHide: () ->

      $root = $(this.getDOMNode())
      audioVideoValue = $root.find('input[name="recording-input-type"]').val()
      console.log("audio video value", audioVideoValue)
      this.setState(showNote: !this.state.showNote)

  getInitialState: () ->
    {isRecording: window.ParentIsRecording, showNote: true, recordedOnce: false, chatMixer: MixerStore.mixers?.chatMixer}

  render: () ->

    recordingVerb = if this.state.isRecording then 'Stop' else 'Start'

    recordingBtnClasses = classNames({
      "currently-recording" : this.state.isRecording,
      "control" : true
    })

    noteJSX = `<div className="important-note">
      <h5>
        Important Note
      </h5>
      <div className="contents">
        While playing in your session, you are listening to your own personal mix. This recording will use the master mix,
        which may sound very different.  To hear and adjust your master mix settings, click the MIXER button in the session toolbar.
      </div>
    </div>`


    chatHelp = `<a href="#" onClick={this.onChatHelp} className="chat-help">[?]</a>`

    recordingJSX =
      `<div className="recording-options">
        <div className="video-settings">
          <h3>Recording Type</h3>
          <div className="field">
            <input type="radio" name="recording-input-type" id="recording-input-audio" value="audio-only" defaultChecked="checked"  />
            <label htmlFor="recording-input-audio">Audio only</label>
            <div className="clearall"></div>
          </div>
          <div className="field">
            <input type="radio" name="recording-input-type" id="recording-input-both" value="audio-video" />
            <label htmlFor="recording-input-both">Audio and video</label>
            <div className="clearall"></div>
          </div>
          <div className="field">
            <select className="easydropdown" name="recording-selection" id="recording-selection">
              <option value="video-window">Record session video window</option>
              <option value="webcam-only">Record my webcam only</option>
            </select>
          </div>
        </div>

        <div className="audio-settings">
          <input type="checkbox" name="include-chat" id="include-chat" /><label htmlFor="include-chat">Include voice chat in recorded audio {chatHelp}</label>
        </div>
      </div>`

    if this.state.showNote
      noteText = 'hide note'
    else
      noteText = 'show note'

    noteShowHideJSX = `<a href="#" className="note-show-hide" onClick={this.onNoteShowHide}>{noteText}</a>`

    note = null
    recordingOptions = null
    noteShowHide = null

    if this.state.showNote && !this.state.isRecording && !this.state.recordedOnce
      # should we show the note itself?  Only if not recording, too
      note = noteJSX

    if !this.state.isRecording && !this.state.recordedOnce
      noteShowHide = noteShowHideJSX

      if gon.global.video_available == "full"
        recordingOptions = recordingJSX


    `<div className="recording-start-stop">
      <div className="control-holder">
        <a className={recordingBtnClasses} onClick={this.startStopRecording}>
          <span className="helper" />
          <img src="/assets/content/recordbutton-off.png" width="20" height="20" />
          <span id="recording-status">{recordingVerb} Recording</span>
        </a>
      </div>

      {recordingOptions}

      {note}

      {noteShowHide}

    </div>`

  windowUnloaded: () ->
    @unloaded = true
    window.unloaded = true

    window.opener.RecordingActions.recordingControlsClosed()

  onChatHelp: (e) ->
    e.preventDefault()

    context.JK.prodBubble($(e.target), 'vid-record-chat-input', {}, {positions:['left']})
  trackInputType: (e) ->
    $checkedType = $(e.target);
    @inputType = $checkedType.val()
    logger.debug("updated @inputType",e.target,  @inputType)

  trackAudioType: (e) ->
    $checkedType = $(e.target);
    @audioType = $checkedType.val()
    logger.debug("updated @audioType", @inputType)

  componentDidMount: () ->
    $(window).unload(@windowUnloaded)

    $root = jQuery(this.getDOMNode())

    $recordingType = $root.find('input[type="radio"]')
    context.JK.checkbox($recordingType)

    @inputType = 'audio-only'
    @audioType = 'audio-only'

    $root.find('input[name="recording-input-type"]').on('ifChanged', @trackInputType)
    $root.find('input[name="recording-input-chat-option"]').on('ifChanged', @trackAudioType)

    $recordingRegion = $root.find('#recording-selection')
    #console.log("$recordingou", $recordingRegion)
    #context.JK.dropdown($recordingRegion)

    $includeChat = $root.find('#include-chat')
    context.JK.checkbox($includeChat)



    @resizeWindow()

    # this is necessary due to whatever the client's rendering behavior is.
    setTimeout(@resizeWindow, 300)

  componentDidUpdate: () ->
    @resizeWindow()

    $root = jQuery(this.getDOMNode())
    $includeChat = $root.find('#include-chat')

  shouldComponentUpdate: () ->
    return !@unloaded

  resizeWindow: () =>
    $container = $('#minimal-container')
    width = $container.width()
    height = $container.height()

    # there is 20px or so of unused space at the top of the page.   can't figure out why it's there. (above #minimal-container)
    mysteryTopMargin = 20

    # deal with chrome in real browsers
    offset = (window.outerHeight - window.innerHeight) + mysteryTopMargin

    # handle native client chrome that the above outer-inner doesn't catch
    #if navigator.userAgent.indexOf('JamKazam') > -1

    #offset += 25

    window.resizeTo(width, height + offset)
})