import Ember from 'ember';
import IntervalTree from 'interval-tree';

export default Ember.Component.extend({

    classNames: ['transcript-component'],

    player: Ember.inject.service(),

    autoscrollElement : '.corpus-app-container',
    previousElement: 0,
    autoscroll: true,
    timeout: null,

    transcript: Ember.computed.readOnly('player.transcript'),
    hasSections: Ember.computed('transcript', function() {
      var sections = this.get('transcript.sections');
      return sections && sections.length > 0;
    }),

    didReceiveAttrs() {
      this._super(...arguments);
    },

    itemObserver: Ember.observer('player.item', function () {
      if ( !(this.get('isDestroyed') || this.get('isDestroying')) ) {
          this.set('autoscroll', true);
      }
    }),

    didInsertElement() {
        Ember.$('#' + this.elementId).parent().on('scroll', Ember.run.bind(this, this.onScroll));
        var intervals = new IntervalTree(this.get('player.model.duration_ms')/2);
        if(this.get('hasSections')) {
          this.get('transcript.sections').forEach((section, indexSection) => {
            section.turns.forEach((turn, indexTurn) => {
              let sentenceId = `#sentence-${indexSection}-${indexTurn}`;
              intervals.add(turn.begin ,turn.end , sentenceId/*, this.$(sentenceId)*/);
            });
          });
        } else {
          this.get('transcript.annotations').forEach((annotation, index) => {
            let sentenceId = `#sentence-${index}`;
            intervals.add(annotation.begin ,annotation.end , sentenceId/*, this.$(sentenceId)*/);
          });
        }
        this.set('intervals', intervals);
    },

    onScroll() {
        if ( !(this.get('isDestroyed') || this.get('isDestroying')) ) {
          this.set('autoscroll', false);
        }
        if(this.elementId) {
          Ember.$('#' + this.elementId).parent().off('scroll');
        }
    },

    scroll: Ember.observer('player.progress', function() {
      var self = this;
      var progress = this.get('player.progress');
      var previousElement = this.get('previousElement');
      if(previousElement && progress >= previousElement.start && progress < previousElement.end) {
        return;
      }
      var intervals = this.get('intervals');
      if(!intervals) {
        return;
      }
      var intervalList = intervals.search(progress);
      if(intervalList.length === 0) {
        return;
      }
      var target = intervalList[0];
      target.object = this.$(target.id);
      let previousDomElement = this.$('.sentence.active');

      if(previousDomElement) {
        previousDomElement.removeClass('active');
        Ember.$(".fa-play",previousDomElement).show();
      }
      target.object.addClass('active');
      Ember.$(".fa-play",target.object).hide();


      if(this.get('autoscroll') && target.object.length && (!previousElement || target.id !== previousElement.id)) {
          Ember.$('#' + self.elementId).parent().off('scroll');
          Ember.$(this.get('autoscrollElement')).animate({
              scrollTop: target.object.offset().top + Ember.$(this.get('autoscrollElement')).scrollTop() - Ember.$(this.get('autoscrollElement')).offset().top - 154
          }, 150, 'swing', function() {
              setTimeout(function() {
                  Ember.$('#' + self.elementId).parent().on('scroll', Ember.run.bind(self, self.onScroll));
              }, 100);
          });
          this.set('previousElement', target);
      }
    }),


    actions: {

        play: function(progress) {
            this.get('player').trigger('progressupdate', progress);
            this.get('player').set('playing', true);
        }
    }

});