/* this widget displays a small tooltip */

import tooltipStyles from "./Tooltip.module.css";

const Tooltip = function (ns) {

  return class extends ns.Widgets.Widget {

    constructor(player, config) {

      super(player, config);

    }

    static defaults = {};

    static template =

      '<div class="Ldt-Tooltip"><div class="Ldt-Tooltip-Main"><div class="Ldt-Tooltip-Corner-NW"></div>' +

      '<div class="Ldt-Tooltip-Border-Top"></div><div class="Ldt-Tooltip-Corner-NE"></div>' +

      '<div class="Ldt-Tooltip-Border-Left"></div><div class="Ldt-Tooltip-Border-Right"></div>' +

      '<div class="Ldt-Tooltip-Corner-SW"></div><div class="Ldt-Tooltip-Border-SW"></div>' +

      '<div class="Ldt-Tooltip-Tip"></div><div class="Ldt-Tooltip-Border-SE"></div>' +

      '<div class="Ldt-Tooltip-Corner-SE"></div><div class="Ldt-Tooltip-Inner">' +

      '<div class="Ldt-Tooltip-Color"></div><p class="Ldt-Tooltip-Text"></p></div></div></div>';

    draw() {

      const _this = this;

      this.renderTemplate();

      this.$.parent().css({

        position: "relative",

      });

      this.$tooltip = this.$.find(".Ldt-Tooltip");

      this.$tip = this.$.find(".Ldt-Tooltip-Tip");

      this.$sw = this.$.find(".Ldt-Tooltip-Border-SW");

      this.$se = this.$.find(".Ldt-Tooltip-Border-SE");

      this.__halfWidth = Math.floor(

        (this.$.find(".Ldt-Tooltip-Main").width() || 192) / 2

      );

      this.__borderWidth = this.$.find(".Ldt-Tooltip-Border-Left").width();

      this.__tipDelta = this.__halfWidth - Math.floor(this.$tip.width() / 2);

      this.__maxShift = this.__tipDelta - this.__borderWidth;

      this.$.mouseover(function () {

        _this.$tooltip.hide();

      });

      this.hide();

    }

    show(x, y, text, color) {

      if (typeof color !== "undefined") {

        // one color or array of colors

        if (typeof color === "string") {

          this.$.find(".Ldt-Tooltip-Color").html("");

          this.$.find(".Ldt-Tooltip-Color")

            .show()

            .css("background-color", color);

          this.$.find(".Ldt-Tooltip-Color").show().css("height", "");

        } else {

          var d = this.$.find(".Ldt-Tooltip-Color");

          d.html("");

          d.show();

          for (var i = 0; i < color.length; i++) {

            d.append(

              '<div style="float: left; height: 10px; width: 10px; background-color: ' +

                color[i] +

                '">'

            );

          }

          this.$.find(".Ldt-Tooltip-Color").css(

            "height",

            color.length * 10 + "px"

          );

        }

      } else {

        this.$.find(".Ldt-Tooltip-Color").hide();

      }

      this.$.find(".Ldt-Tooltip-Text").html(text);

      this.$tooltip.show();

      var shift = 0;

      if (

        typeof this.min_x !== "undefined" &&

        x - this.__halfWidth < this.min_x

      ) {

        shift = Math.max(x - this.__halfWidth - this.min_x, -this.__maxShift);

      }

      if (

        typeof this.max_x !== "undefined" &&

        +x + this.__halfWidth > this.max_x

      ) {

        shift = Math.min(+x + this.__halfWidth - this.max_x, this.__maxShift);

      }

      this.$tooltip.css({

        left: x - shift + "px",

        top: y + "px",

      });

      this.$tip.css({

        left: this.__tipDelta + shift + "px",

      });

      this.$sw.css({

        width: this.__tipDelta + shift - this.__borderWidth + "px",

      });

      this.$se.css({

        width: this.__tipDelta - shift - this.__borderWidth + "px",

      });

    }

    hide() {

      this.$tooltip.hide();

    }

  };

};

export { Tooltip, tooltipStyles };