const SVG_NS = "http://www.w3.org/2000/svg";
const SVG_XLINK = "http://www.w3.org/1999/xlink";
let svgH = 20;
let svg = document.querySelector("svg");
let rid = null;
deformation = 0;
let dragging = false;
let m = { x: 37, y: svgH / 2 };

class Slider {
  constructor(svg) {
    this.deformation = 10;
    this.target = 5;
    this.value = 0;
    this.dragging = false;
    this.svg = svg;
    this.path = svg.querySelector("path");
    this.thumb = _2.querySelector("circle");
    this.label = label; ////
    this.text = _2.querySelector("#_2 text textPath");
    this.inputElement = witness; ////
    this.svg.addEventListener("mousedown", e => {
      this.dragging = true;
      m = oMousePosSVG(e);
      console.clear();
      console.log(Math.round(m.x * 100) / 100);
      this.target = 5;
      Frame();
    });

    this.svg.addEventListener("mouseup", () => {
      this.dragging = false;
      this.target = 0;
      Frame();
      //this.updatePath(m,deformation);
    });

    this.svg.addEventListener("mouseout", () => {
      this.dragging = false;
      this.target = 0;
      Frame();
    });

    this.svg.addEventListener("mousemove", e => {
      if (this.dragging) {
        m = oMousePosSVG(e);
        console.clear();
        console.log(Math.round(m.x * 100) / 100);
        this.target = 5;
        Frame();
      }
    });
  }

  updateValue() {
    let dist = this.target - this.value;
    let vel = dist / 10;
    this.value += vel;
    //improvement
    if (Math.abs(dist) < 0.01) {
      if (rid) {
        window.cancelAnimationFrame(rid);
        rid = null;
      }
    }
  }

  updatePath(m) {
    this.d = curvedPath(m.x, svgH / 2, this.deformation, this.value);
    this.path.setAttributeNS(null, "d", this.d);

    this.thumb.setAttributeNS(null, "r", 0.1 + this.value / 3);
    this.thumb.setAttributeNS(null, "cx", m.x);

    this.updateLabel(m);
    this.updateInput(m);
  }

  updateLabel(m) {
    this.label.setAttributeNS(
      null,
      "transform",
      `translate(${m.x},${svgH / 2 - this.value}) scale(.75)`
    );
    this.text.textContent = Math.round(m.x);
  }
  updateInput(m) {
    this.inputElement.value = Math.round(m.x);
  }
}

function oMousePosSVG(e) {
  var p = svg.createSVGPoint();
  p.x = e.clientX;
  p.y = e.clientY;
  var ctm = svg.getScreenCTM().inverse();
  var p = p.matrixTransform(ctm);
  return p;
}

let slider = new Slider(svg);

function Frame() {
  rid = window.requestAnimationFrame(Frame);
  slider.updateValue();
  slider.updatePath(m);
}

// HELPERS

function curvedPath(X, Y, defX, defY) {
  //let def = 5;//deformation
  //let Y = 20;
  //let X = mouse position
  let D = { cx: X, cy: Y - defY, r: 1 };
  let B = { cx: D.cx - defX, cy: Y, r: 1 };
  let F = { cx: D.cx + defX, cy: Y, r: 1 };
  let A = { cx: D.cx - 2 * defX, cy: Y, r: 1 };
  let G = { cx: D.cx + 2 * defX, cy: Y, r: 1 };

  let C = interpolatePoint(B, D, 1, 2);
  C.r = 1;
  let E = interpolatePoint(D, F, 1, 2);
  E.r = 1;

  return `M0,${Y} L${A.cx},${A.cy}
              Q${B.cx},${B.cy} ${C.cx},${C.cy}
              Q${D.cx},${D.cy} ${E.cx},${E.cy}
              Q${F.cx},${F.cy} ${G.cx},${G.cy}
              L100,${A.cy}
`;
}

function interpolatePoint(a, b, i, n) {
  //point a
  //point b
  //line divided in n segments
  //find the i-th point
  var o = {
    cx: a.cx + (b.cx - a.cx) * (i / n),
    cy: a.cy + (b.cy - a.cy) * (i / n)
  };
  return o;
}