context = window
rest = context.JK.Rest()
SessionActions = @SessionActions
MixerActions = @MixerActions
JamTrackActions = @JamTrackActions
MIX_MODES = context.JK.MIX_MODES
EVENTS = context.JK.EVENTS
ChannelGroupIds = context.JK.ChannelGroupIds

@SessionMediaTracks = React.createClass({

  mixins: [@SessionMediaTracksMixin,
           Reflux.listenTo(@SessionMediaTracksStore,"onInputsChanged"),
           Reflux.listenTo(@AppStore,"onAppInit"),
           Reflux.listenTo(@JamTrackStore, "onJamTrackStateChanged")]

  onJamTrackStateChanged: (jamTrackState) ->
    @setState({jamTrackState: jamTrackState})

    if jamTrackState.fullTrackActivated || jamTrackState.opened && jamTrackState.jamTrack.activeMixdown == null
      @loadJamTrack(jamTrackState.jamTrack)
    else if jamTrackState.closed
      logger.debug("SessionMediaTracks: jamtrack has been closed", jamTrackState)

      if @state.downloadJamTrack?
        logger.debug("closing DownloadJamTrack widget")
        @state.downloadJamTrack.root.remove()
        @state.downloadJamTrack.destroy()
        SessionActions.downloadingJamTrack(false)
        @setState({downloadJamTrack: null})

      MixerActions.closeMedia.trigger(true)


  #inputsChangedProcessed: (state) ->


  closeWindow: () ->
    if @childWindow?
      @childWindow.DontAutoCloseMedia = true
      @childWindow.close()

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

    logger.debug("SessionMediaTracks.closeAudio")
    MixerActions.closeMedia(false)

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

    logger.debug("closing DownloadJamTrack widget")
    @state.downloadJamTrack.root.remove()
    @state.downloadJamTrack.destroy()

    SessionActions.downloadingJamTrack(false)

    @setState({downloadJamTrack: null})

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

    # just ignore the click if they are currently recording for now
    if @state.isRecording
      @app.notify({
        "title": "Currently Recording",
        "text": "You can't open a recording while creating a recording.",
        "icon_url": "/assets/content/icon_alert_big.png"
      })
      return

    @app.layout.showDialog('localRecordings') unless @app.layout.isDialogShowing('localRecordings')

  # openBackingTrack: (e) ->
  #   e.preventDefault()
  #   if @state.backingTrackDialogOpen
  #     logger.debug("backing track dialog already open")
  #     return


  #   # just ignore the click if they are currently recording for now
  #   if @state.isRecording
  #     @app.notify({
  #       "title": "Currently Recording",
  #       "text": "You can't open a backing track while creating a recording.",
  #       "icon_url": "/assets/content/icon_alert_big.png"
  #     });
  #     return

  #   @setState({backingTrackDialogOpen: true})
  #   context.jamClient.ShowSelectBackingTrackDialog("window.JK.HandleBackingTrackSelectedCallback2");

  openBackingTrack: `async function(e) {
      e.preventDefault();
      if (this.state.backingTrackDialogOpen) {
        logger.debug("backing track dialog already open");
        return;
      }


      // just ignore the click if they are currently recording for now
      if (this.state.isRecording) {
        this.app.notify({
          "title": "Currently Recording",
          "text": "You can't open a backing track while creating a recording.",
          "icon_url": "/assets/content/icon_alert_big.png"
        });
        return;
      }

      this.setState({backingTrackDialogOpen: true});
      await context.jamClient.ShowSelectBackingTrackDialog("window.JK.HandleBackingTrackSelectedCallback2");
    }`

  openMetronome: (e) ->

    if @state.isRecording
      @app.notify({
        "title": "Currently Recording",
        "text": "You can't open a metronome while creating a recording.",
        "icon_url": "/assets/content/icon_alert_big.png"
      })
      return

    SessionActions.openMetronome()

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

    if @state.isRecording
      @app.notify({
        "title": "Currently Recording",
        "text": "You can't open a jam track while creating a recording.",
        "icon_url": "/assets/content/icon_alert_big.png"
      })
      return

    @app.layout.showDialog('open-jam-track-dialog').one(EVENTS.DIALOG_CLOSED, (e, data) =>
      # once the dialog is closed, see if the user has a jamtrack selected
      if !data.canceled && data.result.jamTrack
        JamTrackActions.open(data.result.jamTrack)
      else
        logger.debug("OpenJamTrack dialog closed with no selection; ignoring", data)
    )

  # loadJamTrack: (jamTrack) ->
  #   if @state.downloadJamTrack
  #     # if there was one showing before somehow, destroy it.
  #     logger.warn("destroying existing JamTrack")
  #     @state.downloadJamTrack.root.remove()
  #     @state.downloadJamTrack.destroy()
  #     #set to null


  #   downloadJamTrack = new context.JK.DownloadJamTrack(@app, jamTrack, 'large');

  #   # the widget indicates when it gets to any transition; we can hide it once it reaches completion
  #   $(downloadJamTrack).on(EVENTS.JAMTRACK_DOWNLOADER_STATE_CHANGED, (e, data) =>
  #     if data.state == downloadJamTrack.states.synchronized
  #       logger.debug("jamtrack synchronized; hide widget and show tracks")
  #       downloadJamTrack.root.remove()
  #       downloadJamTrack.destroy()
  #       downloadJamTrack = null

  #       this.setState({downloadJamTrack: null})

  #       # XXX: test with this removed; it should be unnecessary
  #       context.jamClient.JamTrackStopPlay();

  #       sampleRate = context.jamClient.GetSampleRate()
  #       sampleRateForFilename = if sampleRate == 48 then '48' else '44'
  #       fqId = jamTrack.id + '-' + sampleRateForFilename

  #       if jamTrack.jmep
  #         logger.debug("setting jmep data")

  #         context.jamClient.JamTrackLoadJmep(fqId, jamTrack.jmep)
  #       else
  #         logger.debug("no jmep data for jamtrack")

  #       # JamTrackPlay means 'load'
  #       result = context.jamClient.JamTrackPlay(fqId);

  #       SessionActions.downloadingJamTrack(false)

  #       console.log("JamTrackPlay: result", result)
  #       if !result
  #         @app.notify(
  #           {
  #             title: "JamTrack Can Not Open",
  #             text: "Unable to open your JamTrack.  Please contact support@jamkazam.com"
  #           }
  #           , null, true)
  #       else
  #         participantCnt = context.SessionStore.participants().length
  #         rest.playJamTrack(jamTrack.id)
  #         .done(() =>
  #           @app.refreshUser();
  #         )

  #         context.stats.write('web.jamtrack.open', {
  #           value: 1,
  #           session_size: participantCnt,
  #           user_id: context.JK.currentUserId,
  #           user_name: context.JK.currentUserName
  #         })
  #   )


  #   @setState({downloadJamTrack: downloadJamTrack})

  loadJamTrack: `async function(jamTrack) {
      if (this.state.downloadJamTrack) {
        // if there was one showing before somehow, destroy it.
        logger.warn("destroying existing JamTrack");
        this.state.downloadJamTrack.root.remove();
        this.state.downloadJamTrack.destroy();
      }
      //set to null


      let downloadJamTrack = new context.JK.DownloadJamTrack(this.app, jamTrack, 'large');

      // the widget indicates when it gets to any transition; we can hide it once it reaches completion
      $(downloadJamTrack).on(EVENTS.JAMTRACK_DOWNLOADER_STATE_CHANGED, async (e, data) => {
        if (data.state === downloadJamTrack.states.synchronized) {
          logger.debug("jamtrack synchronized; hide widget and show tracks");
          downloadJamTrack.root.remove();
          downloadJamTrack.destroy();
          downloadJamTrack = null;

          this.setState({downloadJamTrack: null});

          //XXX: test with this removed; it should be unnecessary
          await context.jamClient.JamTrackStopPlay();

          const sampleRate = await context.jamClient.GetSampleRate();
          const sampleRateForFilename = sampleRate === 48 ? '48' : '44';
          const fqId = jamTrack.id + '-' + sampleRateForFilename;

          if (jamTrack.jmep) {
            logger.debug("setting jmep data");

            await context.jamClient.JamTrackLoadJmep(fqId, jamTrack.jmep);
          } else {
            logger.debug("no jmep data for jamtrack");
          }

          // JamTrackPlay means 'load'
          const result = await context.jamClient.JamTrackPlay(fqId);

          SessionActions.downloadingJamTrack(false);

          console.log("JamTrackPlay: result", result);
          if (!result) {
            return this.app.notify(
              {
                title: "JamTrack Can Not Open",
                text: "Unable to open your JamTrack.  Please contact support@jamkazam.com"
              }
              , null, true);
          } else {
            const participantCnt = context.SessionStore.participants().length;
            rest.playJamTrack(jamTrack.id)
            .done(() => {
              return this.app.refreshUser();
            });

            return context.stats.write('web.jamtrack.open', {
              value: 1,
              session_size: participantCnt,
              user_id: context.JK.currentUserId,
              user_name: context.JK.currentUserName
            });
          }
        }
      });


      return this.setState({downloadJamTrack});
    }`

  render: () ->

    content = null
    scrollerClassData = {'session-tracks-scroller': true}
    mediaOptions = `<div className="media-options">
      <div className="open-media-file-header">
        <div className="vertical-helper" />
        <img src="/assets/content/icon_open_folder.png" width="21" height="21" />
        <span className="open-text">Open:</span>
      </div>
      <ul className="open-media-file-options">
        <li>
          <a className="open-recording" onClick={this.openRecording}>Recording</a>
        </li>
        <li>
          <a className="open-jamtrack" onClick={this.openJamTrack}>JamTrack</a>
        </li>
        <li>
          <a className="open-backingtrack" onClick={ this.openBackingTrack }>Audio File</a>
        </li>
      </ul>
      <div className="use-metronome-header">
        <img src="/assets/content/icon_instrument_metronome21.png" width="21" height="21" />
        <a className="open-metronome" onClick={this.openMetronome}>Use Metronome</a>
      </div>
    </div>`

    contents = null
    mediaTracks = []

    mediaTracks.push `<div key="download-jamtrack-holder" className="download-jamtrack-holder"></div>`

    if this.state.downloadJamTrack?
      closeOptions =
      `<div>
        <a className="closeAudio" onClick={this.cancelDownloadJamTrack}>
          <img src="/assets/content/icon_close.png" width="18" height="20" />
          Close JamTrack
        </a>
      </div>`

      contents = closeOptions

    else if this.state.mediaSummary.mediaOpen || @state.jamTrackState?.jamTrack?

      only_opener = false
      # give the users options to close it
      if this.state.mediaSummary.recordingOpen
        mediaType = "Recording"
        only_opener = true
      else if this.state.mediaSummary.jamTrackOpen || @state.jamTrackState?.jamTrack?
        mediaType = "JamTrack"
        only_opener = true
      else if this.state.mediaSummary.backingTrackOpen
        mediaType = "Audio File"
        only_opener = true
      else if this.state.mediaSummary.metronomeOpen
        mediaType = "Metronome"

      else
        mediaType = ""

      if !only_opener || this.state.mediaSummary.isOpener
        closeOptions = `<a className="closeAudio" onClick={this.closeAudio}>
          <img src="/assets/content/icon_close.png" width="18" height="20" />
          Close {mediaType}
        </a>`
      else
        if @state.popupOpen
          closeOptions = `<a className="popup-open">

          </a>`
        else
          closeOptions = `<a className="reopen-popup" href='#' onClick={this.handlePopup}>
              Reopen Popup
          </a>`

      content = null


      if this.state.mediaSummary.backingTrackOpen

        for backingTrack in @state.backingTracks
          backingTrack.mode = @props.mode
          mediaTracks.push(`<SessionBackingTrack key={backingTrack.track.id} {...backingTrack} />`)

      else if this.state.mediaSummary.recordingOpen

        mediaTracks.push(`<SessionRecordedCategory key="RecordedCategory" recordingName={this.state.recordingName} mixers={this.state.mediaCategoryMixer} mode={this.props.mode} />`)
        for recordedTrack in @state.recordedTracks
          recordedTrack.mode = @props.mode
          mediaTracks.push(`<SessionRecordedTrack key={recordedTrack.track.id} {...recordedTrack} />`)

        # if a JamTrack is also open (meaning the Recording was made with a Jamtrack), show it's mixers as well
        if this.state.mediaSummary.jamTrackOpen
          for jamTrack in @state.jamTracks
            jamTrack.mode = @props.mode
            mediaTracks.push(`<SessionJamTrack key={jamTrack.id} {...jamTrack} />`)

      else if this.state.mediaSummary.jamTrackOpen

        # JamTrack shows in this order:
        # The Category mixer
        # The Metronome
        # All the JamTracks
        mediaTracks.push(`<SessionJamTrackCategory key="JamTrackCategory" jamTrackName={this.state.jamTrackName} mixers={this.state.mediaCategoryMixer} mode={this.props.mode} />`)

        if @state.metronome? # && @state.jamTrackMixdown.id == null
          @state.metronome.mode = @props.mode
          mediaTracks.push(`<SessionMetronome key="JamTrackMetronome"  {...this.state.metronome} location="jam-track" />`)


        for jamTrack in @state.jamTracks
          jamTrack.mode = @props.mode
          mediaTracks.push(`<SessionJamTrack key={jamTrack.id} {...jamTrack} />`)

      else if this.state.mediaSummary.metronomeOpen

        @state.metronome.mode = @props.mode
        mediaTracks.push(`<SessionMetronome key={this.state.metronome.id} {...this.state.metronome} />`)

      contents = closeOptions
    else

      scrollerClassData['media-options-showing'] = true
      contents = mediaOptions

    scrollerClasses = classNames(scrollerClassData)

    `<div className="session-media-tracks">
      <h2>recorded audio <span className="session-tracks-help">?</span></h2>
      {contents}
      <div className={scrollerClasses}>
          {content}
        {mediaTracks}
      </div>
    </div>`


  getInitialState:() ->
    {mediaSummary:{mediaOpen: false}, isRecording: false, backingTracks: [], jamTracks: [], recordedTracks: [], metronome: null, jamTrackState: {}, popupOpen: false}

  onAppInit: (app) ->
    @app = app
    $(context.AppStore).on('SessionEnded', @onSessionEnded)

  onSessionEnded: () ->
    @closeWindow()
    
  handleBackingTrackSelectedCallback: (result) ->
    @setState({backingTrackDialogOpen: false})

    SessionActions.openBackingTrack(result)

  componentDidMount: () ->
    context.JK.HandleBackingTrackSelectedCallback2 = @handleBackingTrackSelectedCallback

    $root = $(@getDOMNode())
    context.JK.helpBubble($root.find(".session-tracks-help"), "session-media-tracks-instructions", {}, {offsetParent:$root.closest('.top-parent'), positions: ['right', 'bottom'], width:450})


  componentDidUpdate: () ->

    if @state.downloadJamTrack?
      $holder = $(@getDOMNode()).find('.download-jamtrack-holder')

      if $holder.find('.download-jamtrack').length == 0

        SessionActions.downloadingJamTrack(true)
        $holder.append(@state.downloadJamTrack.root)

        # kick off the download JamTrack process
        @state.downloadJamTrack.init()

    @handlePopup()

  windowUnloaded: () ->
    logger.debug('SessionMediaTracks: window unloaded')
    @setState({popupOpen: false})
    @childWindow = null

  handlePopup: () ->
    if @state.mediaSummary.userNeedsMediaControls || @state.jamTrackState?.jamTrack?
      unless @childWindow?
        logger.debug("opening media control window")
        @childWindow = window.open("/popups/media-controls", 'Media Controls', 'scrollbars=yes,toolbar=no,status=no,height=155,width=350')
        console.log('childWindow', @childWindow)
        @childWindow.PopupProps = {media: @state, jamTrackState: context.JamTrackStore.getState(), downloadingJamTrack: context.SessionStore.downloadingJamTrack, windowUnloaded: @windowUnloaded }
        if !@state.popupOpen
          setTimeout(() =>
            @setState({popupOpen: true})
          , 1)
    else
      if @childWindow?
        @childWindow.DontAutoCloseMedia = true
        @childWindow.close()
      @childWindow = null
      if @state.popupOpen
        setTimeout(() =>
          @setState({popupOpen: false})
        , 1)
})