import _ from "lodash";

import tweetStyles from "./Tweet.module.css";

import jQuery from "jquery";

const Tweet = function (ns) {

  return class extends ns.Widgets.Widget {

    constructor(player, config) {

      super(player, config);

      this.lastAnnotation = false;

    }

    static defaults = {

      hide_timeout: 10000,

      polemics: [

          keywords: ["++"],

          color: "#30d765",

          keywords: ["--"],

          color: "#f51123",

          keywords: ["=="],

          color: "#f1e24a",

          keywords: ["??"],

          color: "#05aae6",

        },

      ],

      annotation_type: "tweet",

      pin_at_start: false,

    };

    static messages =  {

      fr: {

        show_original: "Voir l'original",

      },

      en: {

        show_original: "Show original",

      },

    };

    static template =

      '<div class="Ldt-Tweet-Widget"><div class="Ldt-Tweet-Inner"><div class="Ldt-Tweet-PinClose-Buttons">' +

      '<a href="#" class="Ldt-Tweet-Pin Ldt-TraceMe{{#pin_at_start}} active" title="{{l10n.dont_keep_visible}}{{/pin_at_start}}{{^pin_at_start}}" title="{{l10n.keep_visible}}{{/pin_at_start}}"></a>' +

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

      '</div><div class="Ldt-Tweet-AvatarContainer"><a href="#" class="Ldt-Tweet-ProfileLink" target="_blank">' +

      '<img src="" class="Ldt-Tweet-Avatar"/></a></div><h3><a href="#" class="Ldt-Tweet-ProfileLink Ldt-Tweet-ScreenName" target="_blank">' +

      '</a> (<span class="Ldt-Tweet-FullName"></span>)</h3><p class="Ldt-Tweet-Contents"></p><div class="Ldt-Tweet-Bottom">' +

      '<span class="Ldt-Tweet-Time"></span>' +

      '<a class="Ldt-Tweet-Original" href="" target="_blank">{{l10n.show_original}}</a>' +

      '<a href="" target="_blank" class="Ldt-Tweet-Retweet"><div class="Ldt-Tweet-Icon"></div>{{l10n.retweet}}</a>' +

      '<a href="" target="_blank" class="Ldt-Tweet-Reply"><div class="Ldt-Tweet-Icon"></div>{{l10n.reply}}</a></div></div></div>';

    draw() {

      this.renderTemplate();

      this.pinned = this.pin_at_start;

      var _this = this;

      this.$.find(".Ldt-Tweet-Pin").click(function () {

        var _el = jQuery(this);

          _el.addClass("active").attr("title", _this.l10n.dont_keep_visible);

          _this.cancelTimeout();

          _el.removeClass("active").attr("title", _this.l10n.keep_visible);

          _this.hideTimeout();

      });

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

      });

      this.$.hide();

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

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

          _this.show(_annotation);

      });

    }

    show(_tweet) {

      if (

        typeof _tweet !== "undefined" &&

        typeof _tweet.source !== "undefined"

      ) {

          [

            /#(\w+)/gm,

            function (matches) {

              return (

                '<a href="http://twitter.com/search?q=%23' +

                matches[1] +

                '" target="_blank">'

              );

            },

            "</a>",

          ],

        var _urls = _(_tweet.source.entities.urls).sortBy(function (_entity) {

          return _entity.indices[0];

          _txt = "";

        _(_urls).each(function (_url) {

          if (_url.indices[0] >= _currentPos) {

            _txt += _tweet.source.text.substring(_currentPos, _url.indices[0]);

            _txt +=

              typeof _url.expanded_url !== "undefined" &&

              _url.expanded_url !== null

                ? _url.expanded_url

                : _url.url;

            _currentPos = _url.indices[1];

          }

          var rx = ns.Model.regexpFromTextOrArray(this.polemics[_i].keywords);

          extend.push([

            rx,

            '<span style="background: ' + this.polemics[_i].color + '">',

            "</span>",

          ]);

        var rx = _tweet.found

            ? _this.source.getAnnotations().regexp || false

            : false,

          profile_url = _tweet.source.user

            ? _tweet.source.user.profile_image_url

            : _tweet.source.profile_image_url,

          screen_name = _tweet.source.user

            ? _tweet.source.user.screen_name

            : _tweet.source.from_user,

          user_name = _tweet.source.user

            ? _tweet.source.user.name

            : _tweet.source.from_user_name;

        this.$.find(".Ldt-Tweet-ScreenName").html("@" + screen_name);

        this.$.find(".Ldt-Tweet-ProfileLink").attr(

          "href",

          "https://twitter.com/" + screen_name

        );

        this.$.find(".Ldt-Tweet-Contents").html(

          ns.textFieldHtml(_txt, rx, extend)

        );

        this.$.find(".Ldt-Tweet-Time").html(

          this.l10n.original_time +

            new Date(_tweet.source.created_at).toLocaleTimeString() +

            " / " +

            this.l10n.video_time +

            _tweet.begin.toString()

        );

        this.$.find(".Ldt-Tweet-Retweet").attr(

          "href",

          "https://twitter.com/intent/retweet?tweet_id=" + _tweet.source.id_str

        );

        this.$.find(".Ldt-Tweet-Reply").attr(

          "href",

          "https://twitter.com/intent/tweet?in_reply_to=" + _tweet.source.id_str

        );

        this.$.find(".Ldt-Tweet-Original").attr(

          "href",

          "https://twitter.com/" +

            screen_name +

            "/status/" +

            _tweet.source.id_str

        );

          this.hideTimeout();

      } else {

      }

    hide() {

      this.player.trigger("Annotation.maximize");

      this.$.slideUp();

      this.cancelTimeout();

    }

    cancelTimeout() {

      if (typeof this.hide_timer !== "undefined") {

        window.clearTimeout(this.hide_timer);

        this.hide_timer = undefined;

      }

    }

    hideTimeout() {

      this.cancelTimeout();

      this.hide_timer = window.setTimeout(

        this.functionWrapper("hide"),

        this.hide_timeout

      );

    }

  };

export { Tweet, tweetStyles };