context = window
PLAYBACK_MONITOR_MODE = context.JK.PLAYBACK_MONITOR_MODE
EVENTS = context.JK.EVENTS
logger = context.JK.logger

mixins = []

# this check ensures we attempt to listen if this component is created in a popup
reactContext = if window.opener? then window.opener else window
# make sure this is actually us opening the window, not someone else (by checking for MixerStore)
if window.opener?
  try
    m = window.opener.MixerStore
  catch e
    reactContext = window

# temporarily..
# reactContext = window
if true
  # if /iPhone|iPad|iPod/i.test(navigator.userAgent)
  # iPad or iPhone
  reactContext = window


MediaPlaybackActions = reactContext.MediaPlaybackActions
BrowserMediaStore = reactContext.BrowserMediaStore
BrowserMediaPlaybackStore = reactContext.BrowserMediaPlaybackStore
BrowserMediaPlaybackActions = reactContext.BrowserMediaPlaybackActions

mixins.push(Reflux.listenTo(BrowserMediaPlaybackStore,"onMediaStateChanged"))


@BrowserMediaControls = React.createClass({

  mixins: mixins
  tempos : [ 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 63, 66, 69, 72, 76, 80, 84, 88, 92, 96, 100, 104, 108, 112, 116, 120, 126, 132, 138, 144, 152, 160, 168, 176, 184, 192, 200, 208 ]

  onMediaStateChanged: (changes) ->
    if changes.playbackStateChanged
      if @state.controls?
        if changes.playbackState == 'play_start'
          @state.controls.onPlayStartEvent()
        else if changes.playbackState == 'play_stop'
          @state.controls.onPlayStopEvent()
        else if changes.playbackState == 'play_pause'
          @state.controls.onPlayPauseEvent();
    if changes.positionUpdateChanged
      if @state.controls?
        @state.controls.executeMonitor(changes.positionMs, changes.durationMs, changes.isPlaying)
    if changes.currentTimeChanged
      @setState({time: changes.time})

  monitorControls: (controls) ->

    controls.startMonitor(PLAYBACK_MONITOR_MODE.BROWSER_MEDIA)

  render: () ->


    tempo_options = []
    for tempo in @tempos
      tempo_options.push(`<option key={tempo} value={tempo}>{tempo}</option>`)

    `<div className="media-controls has-mix">

      <div className="jam-track-get-ready">
        <div className="spinner-small"></div>
        <span>Get Ready!</span>
      </div>

      <div className="play-buttons">
        <a className="play-button" href="#">
          <img src="/assets/content/icon_playbutton.png" width="20" height="20" className="playbutton" />
          <img src="/assets/content/icon_pausebutton.png" width="20" height="20" className="pausebutton" />
        </a>
        <a className="stop-button" href="#">
          <img src="/assets/content/icon_stopbutton.png" width="20" height="20" className="stopbutton" />
        </a>
      </div>

      <div className="metronome-playback-options">
        <span id="metronome-playback-select"></span>
      </div>

      <div className="metronome-options">
        <div className="metronome-selects">
          <div class="metronome-field">
            <select className="metronome-select metro-sound" title="Metronome Sound" name="metronome_sound">
              <option value="Beep">Knock</option>
              <option value="Click">Tap</option>
              <option value="Snare">Snare</option>
              <option value="Kick">Kick</option>
            </select>
            <label htmlFor="metronome_sound">Sound:</label>
          </div>
          <div class="metronome-field">
            <select className="metronome-select metro-tempo" title="Metronome Tempo" name="metronome_tempo">
              {tempo_options}
            </select>
            <label htmlFor="metronome_tempo">Tempo:</label>
          </div>
        </div>
      </div>

      <div className="recording-time start-time">{this.state.time}</div>
      <div className="recording-playback">
        <div className="recording-slider"><img src="/assets/content/slider_playcontrols.png" height="16" width="5" /></div>
      </div>
      <div className="recording-time duration-time">0:00</div>

      <div className="recording-current">0:00</div>

      <div className="playback-mode-buttons icheckbuttons">
        <input type="radio" name="playback-mode" defaultChecked="checked" value="preview-to-all" className="preview-to-all" /><label htmlFor="playback-mode-preview-all" className="radio-text">Preview to All</label>
        <input type="radio" name="playback-mode" value="preview-to-me" className="preview-to-me" /><label htmlFor="playback-mode-preview-me" className="radio-text">Preview Only to Me</label>
      </div>
    </div>`


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

  componentDidUpdate: (prevProps, prevState) ->

  componentDidMount: () ->
    $root = jQuery(this.getDOMNode())
    controls = context.JK.PlaybackControls($root, {mediaActions: BrowserMediaPlaybackActions})
    controls.setDisabled(@props.disabled)

    @monitorControls(controls)

    @setState({controls:controls})

  componentWillUpdate: (nextProps) ->

    @state.controls.setDisabled(nextProps.disabled) if @state.controls?
})