import Raphael from "raphael";

// Arrow
const Arrow = function (ns) {
  return class extends ns.Widgets.Widget {
    constructor(player, config) {
      super(player, config);
      this.current_pilot_widget = this.pilot_widget;
    }

    static defaults = {
      arrow_height: 12,
      arrow_width: 20,
      base_height: 0,
      base_curve: 0,
      fill_url: ns.widgetsDir + "/img/pinstripe.png",
      fill_color: "#ffffff", //Gradients can be used, e.g. "90-#000-#fff" for vertical white-to-black
      stroke_color: "#b7b7b7",
      stroke_width: 1.5,
      animation_speed: 20,
    };

    draw() {
      this.height = this.arrow_height + this.base_height;
      this.$.addClass("Ldt-Arrow").css({
        height: 1 + this.height + "px",
        "margin-top": "1px",
        overflow: "hidden",
      });
      this.paper = new Raphael(this.container, this.width, 1 + this.height);
      window.myArrow = this;
      this.svgArrow = this.paper.path(
        "M0," + this.height + "L" + this.width + "," + this.height
      );
      this.svgArrow.attr({
        stroke: this.stroke_color,
        "stroke-width": this.stroke_width,
        fill: this.fill_url ? "url(" + this.fill_url + ")" : this.fill_color,
      });
      this.moveToX(0);
    }

    drawAt(_x) {
      _x = Math.max(0, Math.min(_x, this.width));
      var _d =
        "M0," +
        this.height +
        "L0," +
        Math.min(this.height, this.arrow_height + this.base_curve) +
        "Q0," +
        this.arrow_height +
        " " +
        Math.max(0, Math.min(this.base_curve, _x - this.arrow_width / 2)) +
        "," +
        this.arrow_height +
        "L" +
        Math.max(0, _x - this.arrow_width / 2) +
        "," +
        this.arrow_height +
        "L" +
        Math.max(0, _x - this.arrow_width / 2) +
        "," +
        Math.min(
          this.arrow_height,
          (2 * this.arrow_height * _x) / this.arrow_width
        ) +
        "L" +
        _x +
        ",0" +
        "L" +
        Math.min(this.width, _x + this.arrow_width / 2) +
        "," +
        Math.min(
          this.arrow_height,
          (2 * this.arrow_height * (this.width - _x)) / this.arrow_width
        ) +
        "L" +
        Math.min(this.width, _x + this.arrow_width / 2) +
        "," +
        this.arrow_height +
        "L" +
        Math.min(
          this.width,
          Math.max(this.width - this.base_curve, _x + this.arrow_width / 2)
        ) +
        "," +
        this.arrow_height +
        "Q" +
        this.width +
        "," +
        this.arrow_height +
        " " +
        this.width +
        "," +
        Math.min(this.height, this.arrow_height + this.base_curve) +
        "L" +
        this.width +
        "," +
        this.height;
      this.svgArrow.attr({
        path: _d,
      });
    }

    moveToX(_x) {
      this.targetX = Math.max(0, Math.min(_x, this.width));
      if (typeof this.animInterval === "undefined") {
        this.animInterval = window.setInterval(
          this.functionWrapper("increment"),
          40
        );
      }
      this.increment();
    }

    moveToTime(_t) {
      if (this.media) {
        this.moveToX((this.width * _t) / this.media.duration);
      }
    }

    increment() {
      if (typeof this.currentX === "undefined") {
        this.currentX = this.targetX;
      }
      if (this.currentX < this.targetX) {
        this.currentX = Math.min(
          this.targetX,
          this.currentX + this.animation_speed
        );
      }
      if (this.currentX > this.targetX) {
        this.currentX = Math.max(
          this.targetX,
          this.currentX - this.animation_speed
        );
      }
      if (this.currentX === this.targetX) {
        window.clearInterval(this.animInterval);
        this.animInterval = undefined;
      }
      this.drawAt(this.currentX);
    }
  };
};

export { Arrow };