import _ from "lodash";

import jQuery from "jquery";

import socialStyles from "./Social.module.css";

const Social = function (ns) {

  return class extends ns.Widgets.Widget {

    constructor(player, config) {

      super(player, config);

    }

    static defaults = {

      text: "",

      url: "",

      show_url: true,

      show_twitter: true,

      show_fb: true,

      show_gplus: true,

      show_mail: true,

    };

    static template =

      '<span class="Ldt-Social">{{#show_url}}<div class="Ldt-Social-Url-Container"><a href="#" draggable="true" target="_blank" class="Ldt-Social-Square Ldt-Social-Url Ldt-TraceMe" title="{{l10n.share_link}}">' +

      '</a><div class="Ldt-Social-UrlPop"><input class="Ldt-Social-Input"/></div></div>{{/show_url}}' +

      '{{#show_fb}}<a href="#" target="_blank" class="Ldt-Social-Fb Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Facebook"></a>{{/show_fb}}' +

      '{{#show_twitter}}<a href="#" target="_blank" class="Ldt-Social-Twitter Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Twitter"></a>{{/show_twitter}}' +

      '{{#show_gplus}}<a href="#" target="_blank" class="Ldt-Social-Gplus Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Google+"></a>{{/show_gplus}}' +

      '{{#show_mail}}<a href="#" target="_blank" class="Ldt-Social-Mail Ldt-TraceMe" title="{{l10n.share_mail}}"></a>{{/show_mail}}</span>';

    static messages =  {

      fr: {

        copy: "Copier",

      },

      en: {

        copy: "Copy",

      },

    };

    draw() {

      this.renderTemplate();

      this.clipId = _.uniqueId("Ldt-Social-CopyBtn-");

      this.$.find(".Ldt-Social-CopyBtn").attr("id", this.clipId);

      var _this = this;

      this.$.find(".Ldt-Social-Url")

        .click(function () {

          _this.toggleCopy();

          return false;

        })

        .on("dragstart", function (e) {

          e.originalEvent.dataTransfer.setData("text/x-iri-title", _this.text);

          e.originalEvent.dataTransfer.setData("text/x-iri-uri", _this.url);

        });

      this.$.find(".Ldt-Social-Input").focus(function () {

        this.select();

      });

      this.$.find(".Ldt-Social-Ext").click(function () {

        window.open(

          jQuery(this).attr("href"),

          "_blank",

          "height=300,width=450,left=100,top=100,toolbar=0,menubar=0,status=0,location=0"

        );

        return false;

      });

      this.updateUrls(this.url, this.text);

    toggleCopy() {

      var _pop = this.$.find(".Ldt-Social-UrlPop");

      _pop.toggle();

      this.$.find(".Ldt-Social-Input").val(this.url).focus();

    }

    updateUrls(_url, _text) {

      this.url = _url;

      this.text = _text;

      this.$.find(".Ldt-Social-Fb").attr(

        "href",

        "http://www.facebook.com/share.php?" +

          jQuery.param({ u: _url, t: _text })

      );

      this.$.find(".Ldt-Social-Twitter").attr(

        "href",

        "https://twitter.com/intent/tweet?" +

          jQuery.param({ url: _url, text: _text })

      );

      this.$.find(".Ldt-Social-Gplus").attr(

        "href",

        "https://plus.google.com/share?" +

          jQuery.param({ url: _url, title: _text })

      );

      this.$.find(".Ldt-Social-Mail").attr(

        "href",

        "mailto:?" + jQuery.param({ subject: _text, body: _text + ": " + _url })

      );

    }

  };

export { Social, socialStyles };