import Mustache from "mustache";

import jQuery from "jquery";

import latestAnnotationStyles from "./LatestAnnotation.module.css";

const LatestAnnotation = function (ns) {

  return class extends ns.Widgets.Widget {

    constructor(player, config) {

      super(player, config);

    }

    static defaults = {

      pre_draw_callback: function () {

      },

      from_user: false,

      filter_by_segment: false,

      segments_annotation_type: "chap",

      hide_without_segment: false,

      annotation_type: "contribution",

      /*

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

       */

      show_only_annotation_from_user: false,

      /*

       * Displays a button that copy currently displayed annotation into CreateAnnotation input field

       */

      copy_and_edit_button: false,

      hide_annotations_list: false,

      /*

       * Allows clicks on an annotation from Annotations to display the annotation content into this widget

       */

      selectable_annotations: false,

      empty_message: false,

      starts_hidden: false,

      show_header: false,

      custom_header: false,

      make_name_string_function: function (params) {

      },

    };

    static messages =  {

      fr: {

        empty: "Aucune annotation à afficher",

        header: "Dernière annotation",

      },

      en: {

        header: "Last annotation",

      },

    };

    static template =

      "{{#show_header}}" +

      "<p class='Ldt-LatestAnnotation-header'>" +

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

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

      "</p>" +

      "{{/show_header}}" +

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

      "</div>";

    static annotationTemplate =

      "<div class='Ldt-LatestAnnotation-Box'>" +

      "{{#copy_and_edit_button}}<div class='Ldt-LatestAnnotation-CopyEditButton'>{{button_text}}</div>{{/copy_and_edit_button}}" +

      "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-CreationDate'>{{{annotation_created}}}</div>" +

      "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Title'>{{{annotation_creator}}}{{#annotation_title}}: {{{annotation_title}}}{{/annotation_title}}</div>" +

      "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Content'>" +

      "{{{annotation_content}}}" +

      "</div>" +

      "</div>";

    importUsers() {

      if (!this.source.users_data) {

          _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);

          },

        });

      }

    draw() {

      var _this = this;

      this.renderTemplate();

      this.annotationContainer_$ = this.$.find(".Ldt-LatestAnnotation");

      if (this.selectable_annotations) {

        this.onMdpEvent("AnnotationsList.refresh", function () {

          _this.getWidgetAnnotations().forEach(function (_annotation) {

            _annotation.off("click");

            _annotation.on("click", function () {

              var _user = {},

                _user_display_string = "",

                _users = this.source.users_data.filter(function (_user_data) {

                  return _user_data.username == _annotation.creator;

              if (_users.length == 0) {

                _user.username = _annotation.creator;

              } else {

                _user = _users[0];

              }

              _user_display_string = _this.make_name_string_function(_user);

              _html = Mustache.render(_this.annotationTemplate, {

                annotation_created:

                  _annotation.created.toLocaleDateString() +

                  ", " +

                  _annotation.created.toLocaleTimeString(),

                annotation_creator: _user_display_string,

                annotation_title: _annotation.title,

                annotation_content: _annotation.description,

                copy_and_edit_button: _this.copy_and_edit_button,

                button_text: _this.l10n.copy_and_edit,

              });

              _this.annotationContainer_$.html(_html);

              _this.selectedAnnotation = true;

            });

          });

        this.segments = _this.source.getAnnotationsByTypeTitle(

          this.segments_annotation_type

        );

        this.segments.forEach(function (_segment) {

          _segment.on("click", function () {

            _this.selectedAnnotation = false;

          });

        });

      }

      this.onMediaEvent("timeupdate", function () {

      });

      this.onMediaEvent("settimerange", function (_timeRange) {

      });

      if (this.starts_hidden) {

      } else {

      }

      this.selectedAnnotation = false; // This flag tells the widget if it must display last annotation (false) or clicked annotation (true)

      this.player.trigger("AnnotationsList.refresh");

      this.refresh();

    refresh(_timeRange) {

      _timeRange = typeof _timeRange !== "undefined" ? _timeRange : false;

      var _this = this;

      if (this.hide_without_segment) {

        if (!_timeRange && !this.media.getTimeRange()) {

          var _currentTime = this.media.getCurrentTime();

          var _currentSegments = this.segments.filter(function (_segment) {

            return (

              _currentTime >= _segment.begin && _currentTime <= _segment.end

            );

          });

          if (_currentSegments.length == 0) {

            this.currentSegment = false;

            this.selectedAnnotation = false;

          } else {

            this.currentSegment = _currentSegments[0];

          }

        } else {

          var _segmentBegin = _timeRange

              ? _timeRange[0]

              : this.media.getTimeRange()[0],

            _segmentEnd = _timeRange

              ? _timeRange[1]

              : this.media.getTimeRange()[1];

          if (

            !this.currentSegment ||

            this.currentSegment.begin != _segmentBegin ||

            this.currentSegment.end != _segmentEnd

          ) {

            var _currentSegments = this.segments.filter(function (_segment) {

              return (

                _segment.begin == _segmentBegin && _segment.end == _segmentEnd

              );

            });

            if (_currentSegments.length > 0) {

              this.selectedAnnotation = false;

              this.currentSegment = _currentSegments[0];

            }

          }

        }

        if (!this.currentSegment) {

          if (this.visible) {

            this.hide();

          }

        } else {

          if (!this.visible) {

            this.show();

          }

        }

      }

      if (this.visible && !this.selectedAnnotation) {

        var _list = this.getWidgetAnnotations();

        if (this.filter_by_segment) {

          if (!this.currentSegment) {

            _list = _list.filter(function (_annotation) {

              return false;

            });

          } else {

            _list = _list.filter(function (_annotation) {

              _annotationTime = (_annotation.begin + _annotation.end) / 2;

              return (

                _this.currentSegment.begin <= _annotationTime &&

                _this.currentSegment.end >= _annotationTime

              );

            });

          }

        }

        _list = _list.sortBy(function (_annotation) {

          return _annotation.created;

        });

        var _latestAnnotation = false,

          _html = "",

          _user_display_string = "",

          _user = {};

        if (_list.length != 0) {

          _latestAnnotation = _list.pop();

          _users = this.source.users_data.filter(function (_user_data) {

            return _user_data.username == _latestAnnotation.creator;

          });

          if (_users.length == 0) {

            _user.username = _latestAnnotation.creator;

          } else {

            _user = _users[0];

          }

          _user_display_string = this.make_name_string_function(_user);

          _html = Mustache.render(this.annotationTemplate, {

            annotation_created:

              _latestAnnotation.created.toLocaleDateString() +

              ", " +

              _latestAnnotation.created.toLocaleTimeString(),

            annotation_creator: _user_display_string,

            annotation_title: _latestAnnotation.title,

            annotation_content: _latestAnnotation.description,

            copy_and_edit_button: this.copy_and_edit_button,

            button_text: this.l10n.copy_and_edit,

          });

        } else {

          var _empty_message = this.l10n.empty;

          if (this.empty_message) {

            _empty_message = this.empty_message;

          }

          _html =

            "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-NoAnnotation'>" +

            _empty_message +

            "</div>";

        }

        this.annotationContainer_$.html(_html);

      }

      if (this.copy_and_edit_button) {

        this.copyAndEditButton_$ = this.$.find(

          ".Ldt-LatestAnnotation-CopyEditButton"

        );

      }

    copy_and_edit() {

      this.player.trigger("CreateAnnotation.show");

      if (this.hide_annotations_list) {

        this.player.trigger("AnnotationsList.hide");

      }

      annotationText = $(".Ldt-LatestAnnotation-Content").get(0).innerHTML;

      $(".Ldt-CreateAnnotation-Description").removeClass("empty");

      $(".Ldt-CreateAnnotation-Description").val(annotationText);

    }

    hide() {

      if (this.visible) {

        this.$.find(".Ldt-LatestAnnotation-header").hide();

        this.annotationContainer_$.hide();

      }

    show() {

      if (!this.visible) {

        this.$.find(".Ldt-LatestAnnotation-header").show();

        this.annotationContainer_$.show();

      }

  };

};

export { LatestAnnotation, latestAnnotationStyles };