import annotationsListStyles from "./AnnotationsList.module.css";

import Mustache from "mustache";

import _ from "lodash";

import jQuery from "jquery";

const IsImageOk = function (img) {

  // During the onload event, IE correctly identifies any images that

  // weren’t downloaded as not complete. Others should too. Gecko-based

  // browsers act like NS4 in that they report this incorrectly.

  if (!img.complete) {

      return false;

  }

  // However, they do have two very useful properties: naturalWidth and

  // naturalHeight. These give the true size of the image. If it failed

  // to load, either of these should be zero.

  if (img.naturalWidth === 0) {

      return false;

  }

  // No other way of checking: assume it’s ok.

  return true;

}

const AnnotationsList = function (ns) {

  const thumbnailBuffer = {};

  return class extends ns.Widgets.Widget {

    constructor(player, config) {

      super(player, config);

      this.lastIds = [];

      var _this = this;

      this.throttledRefresh = _.throttle(function (full) {

        _this.refresh(full);

      }, 800);

      this.searchString = false;

      this.lastSearch = false;

      this.localSource = undefined;

    }

    static defaults = {

      pre_draw_callback: function () {

        return this.importUsers();

      },

      /*

       * URL when the annotations are to be reloaded from an LDT-like segment API

       * e.g.

       * http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?

       */

      ajax_url: false,

      /*

       * number of milliseconds before/after the current timecode when calling the

       * segment API

       */

      ajax_granularity: 600000,

      default_thumbnail: "",

      custom_external_icon: "",

      /*

       * URL when the annotation is not in the current project, e.g.

       * http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/{{project}}/{{annotationType}}#id={{annotation}}

       */

      foreign_url: "",

      annotation_type: false,

      refresh_interval: 0,

      limit_count: 20,

      newest_first: false,

      show_title: true,

      show_audio: true,

      show_creator: true,

      show_controls: false,

      show_end_time: true,

      show_publish: false,

      show_twitter: false,

      twitter_hashtag: "",

      // Callback for Edit action. Leave undefined for default action.

      on_edit: undefined,

      publish_type: "PublicContribution",

      // Used to publish annotations

      api_endpoint_template: "",

      api_serializer: "ldt_annotate",

      api_method: "POST",

      editable: false,

      // Id that will be used as localStorage key

      editable_storage: "",

      widget_max_height: 680,

      always_visible: false,

      start_visible: true,

      show_audio: true,

      show_filters: false,

      keyword_filter: true,

      date_filter: true,

      user_filter: true,

      segment_filter: true,

      latest_contributions_filter: false,

      current_day_filter: true,

      show_header: false,

      custom_header: false,

      annotations_count_header: true,

      annotations_count_header_string: "annotations",

      show_creation_date: false,

      show_timecode: true,

      show_end_time: true,

      project_id: "",

      /*

       * Only annotation in the current segment will be displayed. Designed to work with the Segments Widget.

       */

      allow_annotations_deletion: false,

      /*

       * URL to call when deleting annotation. Expects a mustache template with {{annotation_id}}, ex /api/anotations/{{annotation_id}}/

       */

      api_delete_endpoint: "",

      api_delete_method: "DELETE",

      api_users_endpoint: "",

      api_users_method: "GET",

      make_name_string_function: function (params) {

        return params.username ? params.username : "Anonymous";

      },

      filter_by_segments: false,

      segment_filter: true,

      segments_annotation_type: "chap",

      /*

       * Set to a username if you only want to display annotations from a given user

       */

      show_only_annotation_from_user: false,

      /*

       * Show a text field that filter annotations by username

       */

      tags: true,

      polemics: [

        {

          keyword: "++",

          background_color: "#c9ecc6",

        },

        {

          keyword: "--",

          background_color: "#f9c5c6",

        },

        {

          keyword: "??",

          background_color: "#cec5f9",

        },

        {

          keyword: "==",

          background_color: "#f9f4c6",

        },

      ],

    };

    importUsers() {

      if (!this.source.users_data && this.api_users_endpoint) {

        this.usernames = Array();

        var _this = this,

          _list = this.getWidgetAnnotations(),

          usernames_list_string = "";

        _list.forEach(function (_annotation) {

          if (_this.usernames.indexOf(_annotation.creator) == -1) {

            _this.usernames.push(_annotation.creator);

          }

        });

        this.usernames.forEach(function (_username) {

          usernames_list_string += _username + ",";

        });

        usernames_list_string = usernames_list_string.substring(

          0,

          usernames_list_string.length - 1

        );

        _url = Mustache.render(this.api_users_endpoint, {

          usernames_list_string: encodeURIComponent(usernames_list_string),

          usernames_list_length: this.usernames.length,

        });

        return jQuery.ajax({

          async: false,

          url: _url,

          type: "GET",

          success: function (_data) {

            _this.source.users_data = _data.objects;

          },

          error: function (_xhr, _error, _thrown) {

            console.log(_xhr);

            console.log(_error);

            console.log(_thrown);

          },

        });

      }

    }

    static messages =  {

      en: {

        voice_annotation: "Voice Annotation",

        now_playing: "Now playing...",

        previous: "Previous",

        next: "Next",

        set_time: "Double-click to update to current player time",

        edit_annotation: "Edit note",

        delete_annotation: "Delete note",

        publish_annotation: "Make note public",

        import_annotations:

          "Paste or load notes in this field and press Import.",

        confirm_delete_message:

          "You are about to delete {{ annotation.title }}. Are you sure you want to delete it?",

        confirm_publish_message:

          "You are about to publish {{ annotation.title }}. Are you sure you want to make it public?",

        tweet_annotation: "Tweet annotation",

        external_annotation: "This annotation was submitted to another project",

        everyone: "Everyone",

        header: "Annotations for this content",

        segment_filter: "All cuttings",

        latest_contributions: "Latest contributions",

        close_widget: "Close",

        confirm: "Confirm",

        cancel: "Cancel",

        annotation_deletion_delete: "You will delete this annotation",

        annotation_deletion_sending: "Your deletion request is being sent ... ",

        annotation_deletion_success: "The annotation has been deleted.",

        annotation_deletion_error:

          "There was an error contacting the server. The annotation has not been deleted.",

      },

      fr: {

        voice_annotation: "Annotation Vocale",

        now_playing: "Lecture en cours...",

        previous: "Précédent",

        next: "Suivant",

        set_time: "Double-cliquer pour fixer au temps du lecteur",

        edit_annotation: "Éditer la note",

        delete_annotation: "Supprimer la note",

        publish_annotation: "Rendre la note publique",

        import_annotations:

          "Copiez ou chargez des notes dans ce champ et appuyez sur Import",

        confirm_delete_message:

          "Vous allez supprimer {{ annotation.title }}. Êtes-vous certain(e) ?",

        confirm_publish_message:

          "Vous allez publier {{ annotation.title }}. Êtes-vous certain(e) ?",

        tweet_annotation: "Tweeter l'annotation",

        external_annotation:

          "Cette annotation a été postée sur un autre projet",

        everyone: "Tous",

        header: "Annotations sur ce contenu",

        segment_filter: "Tous les segments",

        latest_contributions: "Dernières contributions",

        close_widget: "Fermer",

        confirm: "Confirmer",

        cancel: "Annuler",

        annotation_deletion_delete: "Vous allez supprimer cette annotation",

        annotation_deletion_sending:

          "Votre demande de suppression est en cours d'envoi ... ",

        annotation_deletion_success: "L'annotation a été supprimée.",

        annotation_deletion_error:

          "Une erreur s'est produite en contactant le serveur. L'annotation n'a pas été supprimée.",

      },

    };

    static template =

      '{{#show_header}}<p class="Ldt-AnnotationsList-header">' +

      "{{#custom_header}}{{custom_header}}{{/custom_header}}" +

      "{{^custom_header}}{{l10n.header}}{{/custom_header}}" +

      "</p>{{/show_header}}" +

      '<div class="Ldt-AnnotationsListWidget">' +

      '<div class="Ldt-AnnotationsList-ScreenMain">' +

      "{{#show_filters}}" +

      '<div class="Ldt-AnnotationsList-Filters">' +

      '{{#keyword_filter}}<input class="Ldt-AnnotationsList-filter-text" id="Ldt-AnnotationsList-keywordsFilter" type="text" value=""></input>{{/keyword_filter}}' +

      '{{#user_filter}}<select class="Ldt-AnnotationsList-filter-dropdown" id="Ldt-AnnotationsList-userFilter"><option selected value="">{{l10n.everyone}}</option></select>{{/user_filter}}' +

      '{{#date_filter}}<label class="Ldt-AnnotationsList-filter-date">Date: <input id="Ldt-AnnotationsList-dateFilter" type="text"></input></label>{{/date_filter}}' +

      '{{#segment_filter}}<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox" id="Ldt-AnnotationsList-ignoreSegmentsFilter">{{l10n.segment_filter}}</label>{{/segment_filter}}' +

      '{{#latest_contributions_filter}}<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox" id="Ldt-AnnotationsList-latestContributionsFilter">{{l10n.latest_contributions}}</label>{{/latest_contributions_filter}}' +

      "</div>" +

      "{{/show_filters}}" +

      '{{#show_controls}}<div class="Ldt-AnnotationsList-Controls"><span class="Ldt-AnnotationsList-Control-Prev">{{ l10n.previous }}</span> | <span class="Ldt-AnnotationsList-Control-Next">{{ l10n.next }}</span></div>{{/show_controls}}' +

      '{{#show_audio}}<div class="Ldt-AnnotationsList-Audio"></div>{{/show_audio}}' +

      '<ul class="Ldt-AnnotationsList-ul">' +

      "</ul>" +

      "</div>" +

      "{{#allow_annotations_deletion}}" +

      '<div data-annotation="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenDelete">' +

      '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>' +

      "{{l10n.annotation_deletion_delete}}" +

      '<ul class="Ldt-AnnotationsList-ul-ToDelete"></ul>' +

      '<a class="Ldt-AnnotationsList-ConfirmDelete">{{l10n.confirm}}</a> <a class="Ldt-AnnotationsList-CancelDelete">{{l10n.cancel}}</a>' +

      "</div>" +

      '<div data-annotation="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenSending">' +

      '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>' +

      "{{l10n.annotation_deletion_sending}}" +

      "</div>" +

      '<div data-annotation="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenSuccess">' +

      '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>' +

      "{{l10n.annotation_deletion_success}}" +

      "</div>" +

      '<div data.annotation="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenError">' +

      '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>' +

      "{{l10n.annotation_deletion_error}}" +

      "</div>" +

      "{{/allow_annotations_deletion}}" +

      "</div>";

    static annotationTemplate =

      '<li class="Ldt-AnnotationsList-li Ldt-Highlighter-Annotation Ldt-TraceMe" data-annotation="{{ id }}" data-begin="{{ begin_ms }}" data-end="{{ end_ms }}" trace-info="annotation-id:{{id}}, media-id:{{media_id}}" style="{{specific_style}}">' +

      '<div data-annotation="{{ id }}" class="Ldt-AnnotationsList-ThumbContainer Ldt-AnnotationsList-Annotation-Screen Ldt-AnnotationsList-Annotation-ScreenMain">' +

      '<a {{#url}}href="{{url}}"{{/url}} draggable="true">' +

      '<img title="{{^external}}{{ begin }} - {{ end }}{{/external}}{{#external}}{{l10n.external_annotation}}{{/external}}" class="Ldt-AnnotationsList-Thumbnail" id="{{thumbnailId}}" />' +

      '{{#external}}<div title="{{l10n.external_annotation}}" class="Ldt-AnnotationsList-External-Icon"></div>{{/external}}' +

      "</a>" +

      "</div>" +

      "{{#allow_annotations_deletion}}" +

      '<div data-annotation="{{ id }}" class="Ldt-AnnotationsList-DeleteButton">&#10006;</div>' +

      "{{/allow_annotations_deletion}}" +

      '{{#show_timecode}}<div title="{{l10n.set_time}}" class="Ldt-AnnotationsList-Duration"><span class="Ldt-AnnotationsList-Begin Ldt-live-editable Ldt-AnnotationsList-TimeEdit" data-editable_value="{{begin}}" data-editable_id="{{id}}" data-editable_field="begin" data-editable_type="timestamp">{{begin}}</span>{{#show_end_time}} - <span class="Ldt-AnnotationsList-End Ldt-live-editable" data-editable_value="{{end}}" data-editable_id="{{id}}" data-editable_field="end" data-editable_type="timestamp">{{end}}</span>{{/show_end_time}}</div>{{/show_timecode}}' +

      '<h3 class="Ldt-AnnotationsList-Title Ldt-Annotation-Timecode" data-timecode="{{ begin_ms }}" draggable="true">' +

      '{{#show_title}}<span class="Ldt-AnnotationsList-TitleContent Ldt-live-editable" data-editable_value="{{title}}" data-editable_type="multiline" data-editable_id="{{id}}" data-editable_field="title">{{{htitle}}}</span>{{/show_title}}' +

      '{{#show_creator}}<span class="Ldt-AnnotationsList-Creator">{{ creator }}</span>{{/show_creator}}' +

      "</h3>" +

      '<p class="Ldt-AnnotationsList-Description Ldt-live-editable" data-editable_type="multiline" data-editable_value="{{description}}" data-editable_id="{{id}}" data-editable_field="description">{{{hdescription}}}</p>' +

      "{{#created}}" +

      '<div class="Ldt-AnnotationsList-CreationDate">{{{created}}}</div>' +

      "{{/created}}" +

      "{{#tags.length}}" +

      '<ul class="Ldt-AnnotationsList-Tags">' +

      "{{#tags}}" +

      "{{#.}}" +

      '<li class="Ldt-AnnotationsList-Tag-Li">' +

      "<span>{{.}}</span>" +

      "</li>" +

      "{{/.}}" +

      "{{/tags}}" +

      "</ul>" +

      "{{/tags.length}}" +

      '{{#audio}}<div class="Ldt-AnnotationsList-Play" data-annotation-id="{{id}}">{{l10n.voice_annotation}}</div>{{/audio}}' +

      '<div class="Ldt-AnnotationsList-EditControls">' +

      '{{#show_twitter}}<a title="{{l10n.tweet_annotation}}" target="_blank" href="https://twitter.com/intent/tweet?{{twitter_param}}"><img width="16" height="16" src="metadataplayer/img/twitter.svg"></a>{{/show_twitter}}' +

      '{{#show_publish}}<div title="{{l10n.publish_annotation}}" class="Ldt-AnnotationsList-PublishAnnotation" data-editable_id="{{id}}"></div>{{/show_publish}}' +

      '{{#editable}}<div title="{{l10n.edit_annotation}}" class="Ldt-AnnotationsList-Edit" data-editable_id="{{id}}"></div>' +

      '<div title="{{l10n.delete_annotation}}" class="Ldt-AnnotationsList-Delete" data-editable_id="{{id}}"></div>{{/editable}}' +

      "</div>" +

      "</li>";

    // obj.url = this.project_url + "/" + media + "/" + annotations[i].meta.project

    // + "/" + annotations[i].meta["id-ref"] + '#id=' + annotations[i].id;

    ajaxSource() {

      var _currentTime = this.media.getCurrentTime(),

        _duration = this.media.duration;

      this.lastAjaxQuery = _currentTime;

      var _url = Mustache.render(this.ajax_url, {

        media: this.source.currentMedia.id,

        begin: Math.max(0, _currentTime - this.ajax_granularity),

        end: Math.min(

          _duration.milliseconds,

          _currentTime + this.ajax_granularity

        ),

      });

      this.currentSource = this.player.loadMetadata(

        _.defaults(

          {

            url: _url,

          },

          this.metadata

        )

      );

    }

    showScreen(_screenName) {

      this.$.find(".Ldt-AnnotationsList-Screen" + _screenName)

        .show()

        .siblings()

        .hide();

    }

    ajaxMashup() {

      var _currentTime = this.media.getCurrentTime();

      var _currentAnnotation =

        this.source.currentMedia.getAnnotationAtTime(_currentTime);

      if (