/* This widget displays the image associated to the annotation in the given container */
// ImageDisplay
import imageDisplayStyles from "./ImageDisplay.module.css";

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

    static defaults = {
      annotation_type: "Slides",
      // container: "imageContainer"
    };

    static template =
      '<div class="Ldt-ImageDisplay-Container"><div class="Ldt-ImageDisplay-Overlay Ldt-ImageDisplay-Overlay-Left"></div><div class="Ldt-ImageDisplay-Overlay Ldt-ImageDisplay-Overlay-Right"></div></div>';

    annotationTemplate = "";

    update(annotation) {
      // Update the widget with data corresponding to the annotation
      this.image.css("background-image", "url(" + annotation.thumbnail + ")");
      this.image.attr(
        "title",
        ns.textFieldHtml(annotation.title) + " - " + annotation.begin.toString()
      );
    }

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

      _this.$.find(".Ldt-ImageDisplay-Overlay-Left").on("click", function () {
        _this.navigate(-1);
      });
      _this.$.find(".Ldt-ImageDisplay-Overlay-Right").on("click", function () {
        _this.navigate(+1);
      });

      _annotations.forEach(function (_a) {
        _a.on("enter", function () {
          _this.update(_a);
        });
      });
      if (_annotations.length) _this.update(_annotations[0]);
    }
  };
};

export { ImageDisplay, imageDisplayStyles };