import Mustache from "mustache";
import slidePreviewStyles from "./SlidePreview.module.css";
import jQuery from "jquery";

const SlidePreview = function (ns) {
  return class extends ns.Widgets.Widget {
    constructor(player, config) {
      super(player, config);
    }

    static defaults = {
      annotation_type: "Slides",
    };

    static template =
      '<div class="Ldt-SlidePreview-Container"><div class="Ldt-SlidePreview-Slides"></div></div>';

    static annotationTemplate =
      '<div data-id="{{ id }}" data-timecode="{{ ms }}" class="Ldt-SlidePreview-Item"><img title="{{ begin }} - {{ atitle }}" class="Ldt-AnnotationsList-Thumbnail" src="{{ thumbnail }}"></div>';

    draw() {
      var _annotations = this.getWidgetAnnotations().sortBy(function (
        _annotation
      ) {
        return _annotation.begin;
      });
      var _this = this;
      _this.renderTemplate();
      var content = _this.$.find(".Ldt-SlidePreview-Slides");

      this.getWidgetAnnotations().forEach(function (_a) {
        var _data = {
          id: _a.id,
          content: ns.textFieldHtml(_a.title),
          begin: _a.begin.toString(),
          ms: _a.begin.milliseconds,
          thumbnail: _a.thumbnail,
        };
        var _html = Mustache.render(_this.annotationTemplate, _data);
        var _el = jQuery(_html);
        content.append(_el);
      });
      _this.$.on("click", ".Ldt-SlidePreview-Item", function () {
        _this.media.setCurrentTime(Number(this.dataset.timecode));
      });
    }
  };
};

export { SlidePreview, slidePreviewStyles };