// CreateAnnotation

import createAnnotationStyles from "./CreateAnnotation.module.css";

import Mustache from "mustache";

import _ from "lodash";

import jQuery from "jquery";

const CreateAnnotation = function (ns) {

  return class extends ns.Widgets.Widget {

    constructor(player, config) {

      super(player, config);

      if (

        this.editable_storage != "" &&

        window.localStorage[this.editable_storage]

      ) {

          var _export = this.player.sourceManager.newLocalSource({

            serializer: ns.serializers["ldt_localstorage"],

          });

          _export.deSerialize(window.localStorage[this.editable_storage]);

          _this.source.merge(_export);

      }

    }

    static defaults = {

      show_title_field: true,

      show_creator_field: true,

      creator_field_readonly: false,

      start_visible: true,

      always_visible: false,

      show_slice: true,

      show_arrow: true,

      show_time: true,

      minimize_annotation_widget: true,

      creator_name: "",

      creator_avatar: "",

      tags: false,

      tag_titles: false,

      pause_on_write: true,

      max_tags: 8,

      polemics: [

        {

          keyword: "++",

          background_color: "#00a000",

          text_color: "#ffffff",

        },

        {

          keyword: "--",

          background_color: "#c00000",

          text_color: "#ffffff",

        },

        {

          keyword: "??",

          background_color: "#0000e0",

          text_color: "#ffffff",

        },

        {

          keyword: "==",

          background_color: "#f0e000",

          text_color: "#000000",

        },

      ],

      slice_annotation_type: "chap",

      annotation_type: "Contributions",

      post_at_segment_time: false,

      segment_annotation_type: "chap",

      api_serializer: "ldt_annotate",

      api_endpoint_template: "",

      api_method: "POST",

      // Id that will be used as localStorage key

      editable_storage: "",

      project_id: "",

      after_send_timeout: 0,

      close_after_send: false,

      tag_prefix: "#",

      pause_when_displaying: false,

      custom_send_button: false,

      custom_cancel_button: false,

      custom_description_placeholder: false,

      preview_mode: false,

    };

    static messages =  {

      en: {

        wait_while_processing:

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

        error_while_contacting:

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

        in_tooltip: "Set begin time to current player time",

        out_tooltip: "Set begin time to current player time",

        play_tooltip: "Play the fragment",

      },

      fr: {

        preview_submit:

          "Vous ne pouvez pas envoyer d'annotation en mode aperçu",

        wait_while_processing:

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

        error_while_contacting:

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

        share_annotation:

          "Souhaitez-vous la partager sur les réseaux sociaux ?",

        in_tooltip: "Utiliser le temps courant comme début",

        out_tooltip: "Utiliser le temps courant comme fin",

        play_tooltip: "Jouer le fragment",

      },

    };

    static template =

      '{{#show_slice}}<div class="Ldt-CreateAnnotation-Slice Ldt-TraceMe"></div>{{/show_slice}}' +

      '{{^show_slice}}{{#show_arrow}}<div class="Ldt-CreateAnnotation-Arrow"></div>{{/show_arrow}}{{/show_slice}}' +

      '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">' +

      '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">' +

      '<h3><span class="Ldt-CreateAnnotation-h3Left">{{l10n.annotate_video}}{{#show_title_field}}</span></h3>' +

      '<h3><span class="Ldt-CreateAnnotation-h3Left"><input class="Ldt-CreateAnnotation-Title empty" placeholder="{{l10n.type_title}}" />{{/show_title_field}}' +

      '{{#show_time}}<span class="Ldt-CreateAnnotation-Times"> {{#show_slice}}{{l10n.from_time}} {{/show_slice}}{{^show_slice}}{{l10n.at_time}} {{/show_slice}} <span class="Ldt-CreateAnnotation-Begin">00:00</span>{{/show_time}}' +

      '{{#show_slice}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">{{end}}</span>{{/show_slice}}</span></span>' +

      '{{#show_creator_field}}{{l10n.your_name_}} <input class="Ldt-CreateAnnotation-Creator empty" value="{{creator_name}}" {{#creator_field_readonly}}readonly{{/creator_field_readonly}}/>{{/show_creator_field}}</h3>' +

      '{{#show_controls}}<div class="Ldt-CreateAnnotation-Controls">' +

      '<span title="{{l10n.in_tooltip}}" class="Ldt-CreateAnnotation-Control-In">In</span>' +

      '<span title="{{l10n.out_tooltip}}" class="Ldt-CreateAnnotation-Control-Out">Out</span>' +

      '<span title="{{l10n.play_tooltip}}" class="Ldt-CreateAnnotation-Control-Play">Play</span>' +

      "</div>{{/show_controls}}" +

      '<textarea class="Ldt-CreateAnnotation-Description Ldt-TraceMe empty" placeholder="{{#custom_description_placeholder}}{{custom_description_placeholder}}{{/custom_description_placeholder}}{{^custom_description_placeholder}}{{l10n.type_description}}{{/custom_description_placeholder}}"></textarea>' +

      '{{#show_creator_field}}<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>{{/show_creator_field}}' +

      '<div class="Ldt-CreateAnnotation-SubmitArea Ldt-TraceMe">' +

      '{{#preview_mode}}<input type="button" class="Ldt-CreateAnnotation-PreviewSubmit" title="{{l10n.preview_submit}}" value="{{#custom_send_button}}{{custom_send_button}}{{/custom_send_button}}{{^custom_send_button}}{{l10n.submit}}{{/custom_send_button}}" />{{/preview_mode}}' +

      '{{^preview_mode}}<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{#custom_send_button}}{{custom_send_button}}{{/custom_send_button}}{{^custom_send_button}}{{l10n.submit}}{{/custom_send_button}}" />{{/preview_mode}}' +

      '<input type="button" class="Ldt-CreateAnnotation-Cancel" value="{{#custom_cancel_button}}{{custom_cancel_button}}{{/custom_cancel_button}}{{^custom_cancel_button}}{{l10n.cancel}}{{/custom_cancel_button}}" />' +

      '<div class="Ldt-CreateAnnotation-Begin Ldt-CreateAnnotation-Times">00:00</div>' +

      "</div>" +

      '{{#tags.length}}<div class="Ldt-CreateAnnotation-Tags"><div class="Ldt-CreateAnnotation-TagTitle">{{l10n.add_keywords_}}</div><ul class="Ldt-CreateAnnotation-TagList">' +

      '{{#tags}}<li class="Ldt-CreateAnnotation-TagLi" tag-id="{{id}}" data-text="{{tag_prefix}}{{title}}"><span class="Ldt-CreateAnnotation-TagButton">{{title}}</span></li>{{/tags}}</ul></div>{{/tags.length}}' +

      '{{#polemics.length}}<div class="Ldt-CreateAnnotation-Polemics"><div class="Ldt-CreateAnnotation-PolemicTitle">{{l10n.add_polemic_keywords_}}</div><ul class="Ldt-CreateAnnotation-PolemicList">' +

      '{{#polemics}}<li class="Ldt-CreateAnnotation-PolemicLi" style="background-color: {{background_color}}; color: {{text_color}}" data-text="{{keyword}}">{{keyword}}</li>{{/polemics}}</ul></div>{{/polemics.length}}' +

      '<div style="clear: both;"></div></form>' +

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

      '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Error">{{^always_visible}}<a title="{{l10n.close_widget}}" class="Ldt-CreateAnnotation-Close" href="#"></a>{{/always_visible}}<div class="Ldt-CreateAnnotation-InnerBox">{{l10n.error_while_contacting}}</div></div>' +

      '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Saved">{{^always_visible}}<a title="{{l10n.close_widget}}" class="Ldt-CreateAnnotation-Close" href="#"></a>{{/always_visible}}<div class="Ldt-CreateAnnotation-InnerBox">{{l10n.annotation_saved}}</div></div>' +

      "</div></div>";

    draw() {

      var _this = this;

      this.begin = new ns.Model.Time();

      this.end = this.source.getDuration();

      this.tag_prefix = this.tag_prefix || "";

      if (this.tag_titles && !this.tags) {

        if (!(this.tag_titles.length == 1 && this.tag_titles[0] == "")) {

          this.tags = _(this.tag_titles).map(function (_tag_title) {

            var _tag,

              _tags = _this.source.getTags().searchByTitle(_tag_title, true);

            if (_tags.length) {

              _tag = _tags[0];

            } else {

              _tag = new ns.Model.Tag(false, _this.source);

              _this.source.getTags().push(_tag);

              _tag.title = _tag_title;

            }

            return _tag;

          }).value();

        } else {

          // we forced no tags if this.tag_titles = [''] (and not false)

          this.tags = true;

      }

      if (!this.tags) {

        this.tags = this.source

          .getTags()

          .sortBy(function (_tag) {

            return -_tag.getAnnotations().length;

          })

          .slice(0, this.max_tags)

          .map(function (_tag) {

            return _tag;

          });

      }

      this.renderTemplate();

      if (this.show_slice) {

          this.$.find(".Ldt-CreateAnnotation-Slice"),

          {

            type: "Slice",

            show_arrow: this.show_arrow,

            annotation_type: this.slice_annotation_type,

            onBoundsChanged: function (_from, _to) {

              _this.setBeginEnd(_from, _to);

          },

          "slice"

      } else {

          this.insertSubwidget(

            this.$.find(".Ldt-CreateAnnotation-Arrow"),

            { type: "Arrow" },

            "arrow"

          );

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

          // Do not update timecode if description is not empty

          if (

            _this.$.find(".Ldt-CreateAnnotation-Description").val().trim() == ""

          ) {

            _this.setBeginEnd(_time, _time);

            if (_this.arrow) {

              _this.arrow.moveToTime(_time);

            }

          }

      }

      this.$.find(".Ldt-CreateAnnotation-Cancel").click(function () {

      });

      this.$.find(".Ldt-CreateAnnotation-Close").click(function () {

          ? _this.player.trigger("CreateAnnotation.hide")

          : _this.showScreen("Main");

      });

      this.$.find(

        ".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi"

      ).click(function () {

        _this.addKeyword(jQuery(this).attr("data-text"));

      });

      this.$.find(".Ldt-CreateAnnotation-PolemicLi").each(function () {

        var _el = jQuery(this),

          _kw = _el.attr("data-text"),

          _msg = _this.l10n["polemic" + _kw];

          _el.attr("title", _msg);

      });

      this.$.find(".Ldt-CreateAnnotation-Description").bind(

        "change keyup input paste",

        this.functionWrapper("onDescriptionChange")

      );

      if (this.show_title_field) {

        this.$.find(".Ldt-CreateAnnotation-Title").bind(

          "change keyup input paste",

          this.functionWrapper("onTitleChange")

        );

      }

      if (this.show_creator_field) {

        this.$.find(".Ldt-CreateAnnotation-Creator").bind(

          "change keyup input paste",

          this.functionWrapper("onCreatorChange")

        );

      }

      this.$.find("[class^='Ldt-CreateAnnotation-Control-']").click(

        function () {

          var action = this.className.replace(

            "Ldt-CreateAnnotation-Control-",

            ""

          );

          switch (action) {

              // Set In bound to current player time

              this.setBegin(_this.media.getCurrentTime());

              break;

              // Set In bound to current player time

              this.setEnd(_this.media.getCurrentTime() || _this.media.duration);

              break;

              this.media.setCurrentTime(_this.begin);

              this.media.play();

              break;

          }

          return false;

      );

      if (this.start_visible) {

      } else {

      }

      this.onMdpEvent("CreateAnnotation.toggle", "toggle");

      this.onMdpEvent("CreateAnnotation.hide", "hide");

      this.onMdpEvent("CreateAnnotation.show", "show");

      this.$.find("form").submit(this.functionWrapper("onSubmit"));

    setBegin(t) {

      this.begin = new ns.Model.Time(t || 0);

      this.$.find(".Ldt-CreateAnnotation-Begin").html(this.begin.toString());

    }

    setEnd(t) {

      this.end = new ns.Model.Time(t || 0);

      this.$.find(".Ldt-CreateAnnotation-End").html(this.end.toString());

    }

    setBeginEnd(begin, end) {

      this.setBegin(begin);

      this.setEnd(end);

    }

    showScreen(_screenName) {

      this.$.find(".Ldt-CreateAnnotation-" + _screenName)

        .show()

        .siblings()

        .hide();

    }

    show() {

      if (!this.visible) {

        if (this.pause_when_displaying) {

          this.media.pause();