import _ from "lodash";

import renkanStyles from "./Renkan.module.css";

const Renkan = function (ns) {

  const Rkns = global.Rkns;

  return class extends ns.Widgets.Widget {

    constructor(player, config) {

      super(player, config);

    }

    static defaults = {

      annotation_regexp: /player\/([a-zA-Z0-9_-]+)\/.*id=([a-zA-Z0-9_-]+)/,

      tag_regexp: /search=([^&=]+)/,

      min_duration: 5000,

      renkan_options: {},

    };

    static messages =  {

      fr: {},

      en: {},

    };

    static template =

      '<div class="Ldt-Renkan-Container"><div class="Ldt-Renkan"></div></div>';

    draw() {

      this.messages

this.messages

this.messages

this.messages

this.messagesthis.renderTemplate();

      var _id = ns.Model.getUID();

      this.$.find(".Ldt-Renkan").attr("id", _id);

      var renkan_options = _.extend(

        {

          container: _id,

          editor_mode: false,

          show_bins: false,

          show_top_bar: false,

          force_resize: true,

          language: ns.language,

        },

        this.renkan_options

      );

      this.renkan = new Rkns.Renkan(renkan_options);

      this.node_times = [];

      var _this = this,

      this.renkan.project.on("add:nodes", function (_node) {

          _annmatch = _uri.match(_this.annotation_regexp);

          var _annotations = _list.filter(function (_ann) {

            return (

              _ann.getMedia().id == _annmatch[1] && _ann.id == _annmatch[2]

            );

          });

          _annotations.forEach(function (_ann) {

            var _duration = _ann.getDuration(),

              _preroll =

                +(_duration < _this.min_duration) * (_this.min_duration / 2);

            var _nt = {

              uri: _uri,

              selected: false,

              node: _node,

              annotation: _ann,

              begin: _ann.begin - _preroll,

              end: _ann.end + _preroll,

            };

            _this.node_times.push(_nt);

            var _annselected = false,

              _nodeselected = false;

            _ann.on("select", function () {

              _annselected = true;

              if (!_nodeselected) {

                _node.trigger("select", true);

              }

            _node.on("selected", function () {

              _nodeselected = true;

              if (!_annselected) {

                _ann.trigger("select", true);

              }

            });

            _ann.on("unselect", function () {

              _annselected = false;

              if (_nodeselected) {

                _node.trigger("unselect", true);

              }

            _node.on("unselected", function () {

              _nodeselected = false;

              _nt.selected = false;

              if (_annselected) {

                _ann.trigger("unselect", true);

              }

            });

            _node.on("clicked", function () {

              _ann.trigger("click");

            });

          });

          _node.on("select", function () {

            _this.source.getAnnotations().search(_tagmatch[1]);

          });

          _node.on("unselect", function () {

            _this.source.getAnnotations().search("");

          });

      });

      Rkns.jsonIO(this.renkan, {

        url: this.data,

      });

      this.onMediaEvent("timeupdate", "onTimeupdate");

      this.$.find(".Rk-Editor").on("click", "a", function () {

          times = _this.node_times.filter(function (t) {

            return t.uri == href;

          });

          _(times).each(function (t) {

            t.annotation.trigger("click");

          });

          return false;

      });

    }

    onTimeupdate(_time) {

      _(this.node_times).each(function (_nt) {

        if (_nt.begin <= _time && _nt.end >= _time) {

          if (!_nt.selected) {

            _nt.selected = true;

            _nt.node.trigger("select");

          }

        } else {

          if (_nt.selected) {

            _nt.node.trigger("unselect");

          }

        }

      });

    }

  };

export { Renkan, renkanStyles };