import noteTakingStyles from "./NoteTaking.module.css";

import jQuery from "jquery";

const NoteTaking = function (ns) {

  return class extends ns.Widgets.Widget {

    constructor(player, config) {

      super(player, config);

    static defaults = {

      // Id that will be used as localStorage key

      editable_storage: "",

    static template = '<textarea class="Ldt-NoteTaking-Text"></textarea>';

    draw() {

      var widget = this;

      var content;

      var $ = jQuery;

      widget.renderTemplate();

      content = widget.$.find(".Ldt-NoteTaking-Text");

      function load_content() {

        $(content).val(window.localStorage[widget.editable_storage]);

      }

      function save_content() {

        window.localStorage[widget.editable_storage] = $(content).val();

      }

      // Load current transcript

      if (window.localStorage[widget.editable_storage]) {

        load_content();

      }

      // Thanks to http://stackoverflow.com/questions/4456545/how-to-insert-text-at-the-current-caret-position-in-a-textarea

      $.fn.insertAtCaret = function (text) {

        return this.each(function () {

          if (this.selectionStart !== undefined) {

            // mozilla/netscape support

            var startPos = this.selectionStart,

              endPos = this.selectionEnd,

              scrollTop = this.scrollTop;

            this.value =

              this.value.substring(0, startPos) +

              text +

              this.value.substring(endPos, this.value.length);

            this.focus();

            this.selectionStart = startPos + text.length;

            this.selectionEnd = startPos + text.length;

            this.scrollTop = scrollTop;

          } else {

            // IE input[type=text] and other browsers

            this.value += text;

            this.focus();

            this.value = this.value; // forces cursor to end

          }

        });

      };

      function getAroundCaret(el, length) {

      }

      $(content)

        .keydown(function (_event) {

          if (_event.keyCode == 13 && (_event.ctrlKey || _event.metaKey)) {

              // Found a timecode. Go to position.

              widget.media.setCurrentTime(ns.timestamp2ms(match[1]));

              $(content).insertAtCaret(

                "[" +

                  new ns.Model.Time(widget.media.getCurrentTime()).toString() +

                  "]"

              );

              save_content();

          }

        })

        .on("input", function (_event) {

          // Store updated value

          save_content();

        })

        .on("dblclick", function (_event) {

          var match = /\[([\d:]+)\]/.exec(getAroundCaret(content[0], 8));

          if (match) {

            // Found a timecode. Go to position.

            _event.preventDefault();

            widget.media.setCurrentTime(ns.timestamp2ms(match[1]));

          }

        });

    }

  };

export { NoteTaking, noteTakingStyles };