// Highlighter

import highlighterStyles from "./Highlighter.module.css";
import _ from "lodash";

const Highlighter = function (ns) {
  return class extends ns.Widgets.Widget {
    constructor(player, config) {
      super(player, config);
      var _this = this;
      this.throttledRefresh = _.throttle(function () {
        console.log("highlighter Refresh");
        _this.update();
      }, 800);
    }

    /**
     * Highlighter widget
     * This widgets highlights the current annotations by setting the
     * .activeAnnotation class on appropriate .Ldt-Highlighter-Annotation
     * elements. These elements *must* have data-begin and data-end properties specifying their bounds (in ms) (and data-media specifying the media-id)
     */

    static defaults = {};

    update() {
      var _this = this;
      var _currentTime = _this.media.getCurrentTime();
      _this.$.find(".Ldt-Highlighter-Annotation", document).toggleClass(
        "currentAnnotation",
        function () {
          return (
            this.dataset.media === _this.media.id &&
            this.dataset.begin <= _currentTime &&
            _currentTime < this.dataset.end
          );
        }
      );
      console.log(_this.$.find(".currentAnnotation"));
      return false;
    }

    draw() {
      var _this = this;

      var _events = ["timeupdate", "seeked", "loadedmetadata"];
      for (var _i = 0; _i < _events.length; _i++) {
        _this.onMediaEvent(_events[_i], _this.throttledRefresh);
      }
      _this.throttledRefresh();
    }
  };
};

export { Highlighter, highlighterStyles };