context = window
logger = context.JK.logger

mixins = []

if window.opener?
  SessionActions = window.opener.SessionActions
  MediaPlaybackStore = window.opener.MediaPlaybackStore
  MixerActions = window.opener.MixerActions

mixins.push(Reflux.listenTo(MediaPlaybackStore, 'onMediaStateChanged'))

@PopupMediaControls = React.createClass({

  mixins: mixins

  onMediaStateChanged: (changes) ->
    if changes.currentTimeChanged && @root?
      @setState({time: changes.time})

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

    SessionActions.showNativeMetronomeGui()

  getInitialState: () ->
    {time: '0:00'}

  close: () ->
    window.close()

  render: () ->

    closeLinkText = null
    header = null
    extraControls = null

    # give the users options to close it
    if @props.mediaSummary.jamTrackOpen
      mediaType = "JamTrack"
      mediaName = @props.jamTracks[0].name
      closeLinkText = 'close JamTrack'
      header = `<h3>{mediaType}: {mediaName} ({this.state.time})</h3>`
    else if @props.mediaSummary.backingTrackOpen
      mediaType = "Audio File"
      mediaName = context.JK.getNameOfFile(@props.backingTracks[0].shortFilename)
      closeLinkText = 'close audio file'
      header = `<h3>{mediaType}: {mediaName} ({this.state.time})</h3>`
      extraControls =
      `<div>
        <div className="field">
          <input type="checkbox" name="loop" /><label htmlFor="loop">Loop audio file playback</label>
        </div>
        <br className="clearall"/>
      </div>`
    else if @props.mediaSummary.metronomeOpen
      mediaType = "Metronome"
      closeLinkText = 'close metronome'
      header = `<h3>Metronome</h3>`
      extraControls =
      `<div>
        <a className="display-metronome" onClick={this.showMetronome}>Display visual metronome</a>
      </div>`
    else if @props.mediaSummary.recordingOpen
      mediaType = "Recording"
      mediaName = @props.recordedTracks[0].recordingName
      closeLinkText = 'close recording'
      header = `<h3>{mediaType}: {mediaName} ({this.state.time})</h3>`
    else
      mediaType = ""

    `<div className="media-controls-popup">
      {header}
      <MediaControls />
      {extraControls}
      <a className="close-link" onClick={this.close}>{closeLinkText}</a>
    </div>`

  windowUnloaded: () ->
    SessionActions.closeMedia() unless window.DontAutoCloseMedia

  componentDidMount: () ->

    $(window).unload(@windowUnloaded)

    @root = jQuery(this.getDOMNode())

    $loop = @root.find('input[name="loop"]')
    context.JK.checkbox($loop)

    $loop.on('ifChecked', () =>
      logger.debug("@props", @props)
      # it doesn't matter if you do personal or master, because backend just syncs both
      MixerActions.loopChanged(@props.backingTracks[0].mixers.personal.mixer, true)
    )
    $loop.on('ifUnchecked', () =>
      # it doesn't matter if you do personal or master, because backend just syncs both
      MixerActions.loopChanged(@props.backingTracks[0].mixers.personal.mixer, false)
    )

    @resizeWindow()

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

  componentDidUpdate: () ->
    @resizeWindow()

  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
    mysteryTopMargin = 0
    # 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)
})