/* This widget displays annotations as a transcript */
import Mustache from "mustache";
import jQuery from "jquery";

import transcriptStyles from "./Transcript.module.css";

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

    static defaults = {
      annotation_type: "Caption",
      use_vtt_track: false,
    };

    static template = '<div class="Ldt-TranscriptWidget"></div>';

    static annotationTemplate =
      '<span data-begin="{{ begin }}" data-end="{{ end }}" data-id="{{ id }}" class="Ldt-Transcript-Annotation">{{ content }}</span>  ';

    draw() {
      var _annotations = this.getWidgetAnnotations();
      var _this = this;
      var content;

      _this.renderTemplate();
      content = _this.$.find(".Ldt-TranscriptWidget");

      if (_this.use_vtt_track) {
        // Use webvtt track. It will only work with native video player.
        var widgets = _this.player.widgets.filter(function (w) {
          return w.type == "HtmlPlayer";
        });
        if (widgets) {
          var v = widgets[0].$.find("video")[0];
          // FIXME: allow to specify the used track
          v.addEventListener("loadedmetadata", function () {
            var track = v.textTracks[0];
            var cues = track.cues;
            var i = 1;
            Array.prototype.forEach.apply(cues, [
              function (_c) {
                _c.id = "cue" + i;
                var _html = Mustache.render(_this.annotationTemplate, {
                  id: _c.id,
                  content: _c.text,
                  begin: 1000 * _c.startTime,
                  end: 1000 * _c.endTime,
                });
                i += 1;
                var _el = jQuery(_html);
                content.append(_el);
              },
            ]);
            track.addEventListener(
              "cuechange",
              function () {
                var acues = track.activeCues;
                if (acues.length > 0) {
                  // Update attributes for active cues
                  _this.$.find(".Ldt-Transcript-Annotation.active").removeClass(
                    "active"
                  );
                  Array.prototype.forEach.apply(acues, [
                    function (_c) {
                      _this.$.find("#" + _c.id).addClass("active");
                    },
                  ]);
                }
              },
              false
            );
            content.on("click", ".Ldt-Transcript-Annotation", function () {
              _this.media.setCurrentTime(this.dataset.begin);
            });
          });
        } else {
          console.log("cannot find a video object");
        }
      } else {
        // Populate with annotation data
        _annotations.forEach(function (_a) {
          var _data = {
            id: _a.id,
            content: ns.textFieldHtml(_a.title),
            begin: _a.begin.toString(),
            end: _a.end.toString(),
          };
          var _html = Mustache.render(_this.annotationTemplate, _data);
          var _el = jQuery(_html);
          content.append(_el);
        });
      }
    }
  };
};

export { Transcript, transcriptStyles };