import Mustache from "mustache";

import jQuery from "jquery";

import markersStyles from "./Markers.module.css";

const Markers = function (ns) {

  return class extends ns.Widgets.Widget {

    constructor(player, config) {

      super(player, config);

    }

    static defaults = {

      pre_draw_callback: function () {

        return this.importUsers();

      },

      annotation_type: "markers",

      line_height: 8,

      background: "#e0e0e0",

      marker_color: "#ff80fc",

      placeholder_color: "#ffffff",

      hover_color: "#e15581",

      selected_color: "#74d600",

      ball_radius: 4,

      pause_on_write: true,

      play_on_submit: true,

      api_serializer: "ldt_annotate",

      api_endpoint_template_create: "",

      api_endpoint_template_edit: "",

      api_endpoint_template_delete: "",

      api_method_create: "POST",

      api_method_edit: "PUT",

      api_method_delete: "DELETE",

      project_id: "",

      creator_name: "",

      after_send_timeout: 0,

      markers_gap: 2000,

      allow_empty_markers: false,

      close_after_send: false,

      custom_send_button: false,

      custom_cancel_button: false,

      preview_mode: false,

      filter_per_user: false,

      api_users_endpoint: "",

      make_username_string_function: function (params) {

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

      },

      hide_if_empty: false,

    };

    static template =

      '<div class="Ldt-Markers-Display" style="height:{{line_height}}px;">' +

      '<div class="Ldt-Markers-List" style="height:{{line_height}}px; position: relative;"></div>' +

      '<div class="Ldt-Markers-Position" style="height: {{line_height}}px; top: -{{line_height}};"></div>' +

      "</div>" +

      '<div class="Ldt-Markers-Inputs">' +

      '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenMain">' +

      '<div class="Ldt-Markers-RoundButton Ldt-Markers-CannotCreate" title="{{#preview_mode}}{{l10n.preview_mode_submit}}{{/preview_mode}}{{^preview_mode}}{{l10n.cannot_create}}{{/preview_mode}}">+</div>' +

      '<div class="Ldt-Markers-RoundButton Ldt-Markers-Create">+</div>' +

      '{{^preview_mode}}<div class="Ldt-Markers-RoundButton Ldt-Markers-Delete">&#10006;</div>{{/preview_mode}}' +

      '{{#preview_mode}}<div class="Ldt-Markers-RoundButton Ldt-Markers-PreviewDelete" title="{{l10n.preview_mode_delete}}">&#10006;</div>{{/preview_mode}}' +

      '{{#filter_per_user}}{{#preview_mode}}<select class="Ldt-Markers-userFilter-dropdown" id="Ldt-Markers-userFilter"></select>{{/preview_mode}}{{/filter_per_user}}' +

      '<div class="Ldt-Markers-Info"></div>' +

      "</div>" +

      '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenSending">' +

      '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.wait_while_processing}}</div>' +

      "</div>" +

      '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenSuccess">' +

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

      '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.annotation_saved}}</div>' +

      "</div>" +

      '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenDeleteSuccess">' +

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

      '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.delete_saved}}</div>' +

      "</div>" +

      '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenFailure">' +

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

      '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.error_while_contacting}}</div>' +

      "</div>" +

      '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenConfirmDelete">' +

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

      '<div class="Ldt-Markers-Screen-InnerBox">' +

      "{{l10n.delete_text}} " +

      '<a class="Ldt-Markers-Screen-SubmitDelete">{{l10n.submit_delete}}</a> ' +

      '<a class="Ldt-Markers-Screen-CancelDelete">{{l10n.cancel}}</a>' +

      "</div>" +

      "</div>" +

      "</div>";

    static markerTemplate =

      '<div class="Ldt-Markers-Marker" style="height:{{height}}px; left:{{left}}px; width: 2px; background-color: black;">' +

      '<div class="Ldt-Markers-MarkerBall" style="background-color: {{marker_color}}; position: relative; width: {{ball_diameter}}px; height: {{ball_diameter}}px; left: {{ball_left}}px; top: {{ball_top}}px; border: 1px solid; border-radius: {{ball_radius}}px"></div>' +

      "</div>";

    static markerPlaceholderTemplate =

      '<div class="Ldt-Markers-Marker Ldt-Markers-PlaceholderMarker" style="height:{{height}}px; left:{{left}}px; width: 2px; background-color: black;">' +

      '<div class="Ldt-Markers-MarkerBall" style="background-color: {{marker_color}}; position: relative; width: {{ball_diameter}}px; height: {{ball_diameter}}px; left: {{ball_left}}px; top: {{ball_top}}px; border: 1px solid; border-radius: {{ball_radius}}px"></div>' +

      "</div>";

    static infoTemplate =

      '{{^edit}}<div class="Ldt-Markers-MarkerDescription">{{marker_info}}</div>{{/edit}}' +

      '{{#edit}}<div class="Ldt-Markers-MarkerEdit">' +

      '<textarea class="Ldt-Markers-MarkerTextArea" cols="60" rows="4">{{marker_info}}</textarea>' +

      '<div class="Ldt-Markers-Buttons">' +

      '{{^preview_mode}}<div class="Ldt-Markers-MarkerSend">{{send}}</div>{{/preview_mode}}' +

      '{{#preview_mode}}<div class="Ldt-Markers-MarkerPreviewSend" title="{{preview_mode_text}}">{{send}}</div>{{/preview_mode}}' +

      '<div class="Ldt-Markers-MarkerCancel">{{cancel}}</div>' +

      "</div>" +

      "</div>{{/edit}}";

    static messages =  {

      en: {

        send: "Send",

        submit_delete: "Delete",

        cancel: "Cancel",

        preview_mode_submit: "You cannot submit a marker in preview mode.",

        preview_mode_delete: "You cannot delete a marker in preview mode",

        wait_while_processing:

          "Please wait while your annotation is being processed...",

        delete_text: "The selected marker will be deleted. Continue?",

        error_while_contacting:

          "An error happened while contacting the server. Your annotation has not been saved.",

        annotation_saved: "Thank you, your annotation has been saved.",

        delete_saved: "Thank you, your annotation has been deleted",

        close_widget: "Close",

        cannot_create: "Cannot create marker on this timecode",

      },

      fr: {

        send: "Envoyer",

        submit_delete: "Supprimer",

        cancel: "Annuler",

        preview_mode_submit:

          "Vous ne pouvez pas créer ou éditer de marqueur en mode aperçu",

        preview_mode_delete:

          "Vous ne pouvez pas supprimer de marqueur en mode aperçu",

        wait_while_processing:

          "Veuillez patienter pendant le traitement de votre annotation...",

        delete_text: "Le marqueur sélectionné sera supprimé. Continuer?",

        error_while_contacting:

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

        annotation_saved: "Merci, votre annotation a été enregistrée.",

        delete_saved: "Merci, votre annotation a été supprimée",

        close_widget: "Fermer",

        cannot_create: "Impossible de créer un marqueur sur ce timecode",

      },

    };

    importUsers() {

      if (this.filter_per_user && this.preview_mode) {

        this.usernames = Array();

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

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

            },

          });

        }

      }

    }

    draw() {

      var _this = this;

      this.renderTemplate();

      if (

        !this.filter_per_user ||

        !this.preview_mode ||

        this.usernames.length <= 1

      ) {

        this.$.find(".Ldt-Markers-userFilter-dropdown").hide();

      } else {

        this.usernames.forEach(function (_user) {

          var _users = _this.source.users_data.filter(function (_user_data) {

              return _user_data.username == _user;

            }),

            _user_data = {};

          if (_users.length == 0) {

            _user_data.username = _user;

          } else {

            _user_data = _users[0];

          }

          _this.$.find(".Ldt-Markers-userFilter-dropdown").append(

            "<option value='" +

              _user +

              "'>" +

              _this.make_name_string_function(_user_data) +

              "</option>"

          );

        });

        this.$.find(".Ldt-Markers-userFilter-dropdown").change(

          this.functionWrapper("drawMarkers")

        );

        this.$.find(".Ldt-Markers-userFilter-dropdown").change(

          this.functionWrapper("clearSelectedMarker")

        );

      }

      this.markers = this.getWidgetAnnotations().filter(function (_ann) {

        return _ann.getDuration() == 0 || _ann.begin == _ann.end;

      });

      if (this.hide_if_empty && this.markers.length <= 0) {

        this.$.hide();

      } else {

        this.drawMarkers();

        this.$.find(".Ldt-Markers-Create").click(

          this.functionWrapper("onCreateClick")

        );

        this.$.find(".Ldt-Markers-Delete").click(

          this.functionWrapper("onDeleteClick")

        );

        this.$.find(".Ldt-Markers-RoundButton").hide();

        this.updateCreateButtonState(this.media.getCurrentTime());

        this.$.find(".Ldt-Markers-Screen-SubmitDelete").click(

          this.functionWrapper("sendDelete")

        );

        this.$.find(".Ldt-Markers-Screen-CancelDelete").click(function () {

          _this.showScreen("Main");

          _this.cancelEdit();

        });

        this.showScreen("Main");

        this.$.css({

          margin: "1px 0",

          background: this.background,

        });

        this.$.find(".Ldt-Markers-Close").click(

          this.functionWrapper("revertToMainScreen")

        );

        this.onMediaEvent("timeupdate", this.functionWrapper("updatePosition"));

        this.onMediaEvent(

          "timeupdate",

          this.functionWrapper("updateCreateButtonState")

        );

        this.onMediaEvent("play", this.functionWrapper("clearSelectedMarker"));

        this.onMdpEvent("Markers.refresh", this.functionWrapper("drawMarkers"));

        this.newMarkerTimeCode = 0;

        this.selectedMarker = false;

      }

    }

    updatePosition(_time) {

      var _x = Math.floor((this.width * _time) / this.media.duration);

      this.$.find(".Ldt-Markers-Position").css({

        left: _x + "px",

      });

    }

    updateCreateButtonState(_time) {

      _this = this;

      var can_create = this.preview_mode

        ? false

        : this.markers.every(function (_marker) {

            return (

              _time < _marker.begin - _this.markers_gap ||

              _time > _marker.begin + _this.markers_gap

            );

          });

      if (can_create) {

        if (

          this.$.find(".Ldt-Markers-Create").is(":hidden") &&

          (this.$.find(".Ldt-Markers-Delete").is(":hidden") ||

            this.$.find(".Ldt-Markers-PreviewDelete").is(":hidden"))

        ) {

          this.$.find(".Ldt-Markers-RoundButton").hide();

          this.$.find(".Ldt-Markers-Create").show();

        }

      } else {

        if (

          this.$.find(".Ldt-Markers-CannotCreate").is(":hidden") &&

          (this.$.find(".Ldt-Markers-Delete").is(":hidden") ||

            this.$.find(".Ldt-Markers-PreviewDelete").is(":hidden"))

        ) {

          this.$.find(".Ldt-Markers-RoundButton").hide();

          this.$.find(".Ldt-Markers-CannotCreate").show();

        }

      }

    }

    onCreateClick() {

      this.pauseOnWrite();

      if (!this.selectedMarker) {

        this.newMarkerCurrentTime = this.media.getCurrentTime();

        this.showPlaceholder(this.media.getCurrentTime());

        this.startEdit();

      }

    }

    onDeleteClick() {

      _this = this;

      this.pauseOnWrite();

      if (this.selectedMarker) {

        this.showScreen("ConfirmDelete");

      } else {

        // Click on "x" without a selected marker: back to initial state

        this.cancelEdit();

      }

    }

    startEdit() {

      if (this.selectedMarker) {

        _divHtml = Mustache.render(this.infoTemplate, {

          edit: true,

          preview_mode: this.preview_mode,

          preview_mode_text: this.l10n.preview_mode_submit,

          marker_info: this.selectedMarker.description,

          send: this.custom_send_button

            ? this.custom_send_button

            : this.l10n.send,

          cancel: this.custom_cancel_button

            ? this.custom_cancel_button

            : this.l10n.cancel,

        });

      } else {

        _divHtml = Mustache.render(this.infoTemplate, {

          edit: true,

          marker_info: "",

          preview_mode: this.preview_mode,

          preview_mode_text: this.l10n.preview_mode_submit,

          send: this.custom_send_button

            ? this.custom_send_button

            : this.l10n.send,

          cancel: this.custom_cancel_button

            ? this.custom_cancel_button

            : this.l10n.cancel,

        });