import {
  spline,
  pointsInPath,
  createCoordsTransformer
} from "https://cdn.skypack.dev/@georgedoescode/generative-utils@1.0.1";
import gsap from "https://cdn.skypack.dev/gsap@3.6.1";

gsap.registerPlugin(DrawSVGPlugin);

const buttonPath = document.getElementById("btn-path");

const dummy = {
  x: 40,
  y: window.innerHeight / 2
};

function createLiquidPath(path, options) {
  const svgPoints = pointsInPath(path, options.detail);
  const originPoints = svgPoints.map(({ x, y }) => ({ x, y }));
  const liquidPoints = svgPoints.map(({ x, y }) => ({ x, y }));

  const pointElements = liquidPoints.map((p) => {
    const point = createPoint(p.x, p.y, path.closest("svg"));

    return point;
  });

  const mousePos = { x: 0, y: 0 };
  const transformCoords = createCoordsTransformer(path.closest("svg"));

  const pointDistance = Math.hypot(
    originPoints[0].x - originPoints[1].x,
    originPoints[0].y - originPoints[1].y
  );
  const maxDist = {
    x: options.axis.includes("x") ? pointDistance / 2 : 0,
    y: options.axis.includes("y") ? pointDistance / 2 : 0
  };

  gsap.ticker.add(() => {
    for (let i = 0; i < pointElements.length; i++) {
      gsap.set(pointElements[i], {
        attr: {
          cx: liquidPoints[i].x,
          cy: liquidPoints[i].y
        }
      });
    }
    gsap.set(path, {
      attr: {
        d: spline(liquidPoints, options.tension, options.close)
      }
    });
  });

  gsap.fromTo(
    mousePos,
    {
      x: 0,
      y: 100
    },
    {
      x: 200,
      y: 100,
      onUpdate() {}
    }
  );

  window.addEventListener("mousemove", (e) => {
    if (e.target.nodeName) return;

    console.log(e.target.nodeName);
    const { x, y } = transformCoords(e);

    mousePos.x = x;
    mousePos.y = y;

    liquidPoints.forEach((point, index) => {
      const pointOrigin = originPoints[index];
      const distX = Math.abs(pointOrigin.x - mousePos.x);
      const distY = Math.abs(pointOrigin.y - mousePos.y);

      if (distX <= options.range.x && distY <= options.range.y) {
        const difference = {
          x: pointOrigin.x - mousePos.x,
          y: pointOrigin.y - mousePos.y
        };

        const target = {
          x: pointOrigin.x + difference.x,
          y: pointOrigin.y + difference.y
        };

        const x = gsap.utils.clamp(
          pointOrigin.x - maxDist.x,
          pointOrigin.x + maxDist.x,
          target.x
        );

        const y = gsap.utils.clamp(
          pointOrigin.y - maxDist.y,
          pointOrigin.y + maxDist.y,
          target.y
        );

        gsap.to(point, {
          x: x,
          y: y,
          ease: "sine",
          overwrite: true,
          duration: 0.175,
          onComplete() {
            gsap.to(point, {
              x: pointOrigin.x,
              y: pointOrigin.y,
              ease: "elastic.out(1, 0.3)",
              duration: 1.25
            });
          }
        });
      }
    });
  });
}
function createPoint(x, y, target) {
  const el = document.createElementNS("http://www.w3.org/2000/svg", "circle");

  el.setAttribute("r", 3);
  el.setAttribute("cx", x);
  el.setAttribute("cy", y);

  el.setAttribute("fill", "#7257FA");

  el.classList.add("point");

  target.appendChild(el);

  return el;
}

createLiquidPath(buttonPath, {
  detail: 32,
  tension: 1,
  close: true,
  range: {
    x: 12,
    y: 40
  },
  axis: ["y"]
});

const tl = gsap.timeline({ repeat: -1, repeatDelay: 0.5 });

tl.to(
  "button",
  {
    opacity: 1
  },
  ">"
);

tl.to(
  "button span",
  {
    opacity: 0,
    delay: 0.5
  },
  ">"
);

tl.to(
  "button svg path",
  {
    stroke: "#fff",
    fill: "#fff",
    onComplete() {
      tl.timeScale(3);
    }
  },
  ">"
);

tl.to(
  ".point",
  {
    opacity: 1,
    delay: 0.5,
    stagger: 0.1,
    onComplete() {
      tl.timeScale(1);
    }
  },
  ">"
);

tl.to(
  "button svg path",
  {
    stroke: "#3C2E7F",
    duration: 0,
    drawSVG: 0
  },
  ">"
);

tl.to(
  dummy,
  {
    x: window.innerWidth - 40,
    yoyo: true,
    duration: 2,
    repeat: 1,
    delay: 0.5,
    onUpdate() {
      gsap.set(".mouse", {
        x: dummy.x,
        y: dummy.y,
        opacity: 1
      });
      const event = new MouseEvent("mousemove", {
        view: window,
        bubbles: true,
        cancelable: true,
        clientX: dummy.x,
        clientY: dummy.y
      });
      window.dispatchEvent(event);
    },
    onComplete() {
      gsap.to(".mouse", {
        // opacity: 0
      });

      tl.timeScale(0.375);
    }
  },
  ">"
);

tl.to(
  "button svg path",
  {
    drawSVG: "100%",
    delay: 0.25,
    onComplete() {
      tl.timeScale(1);
    }
  },
  ">"
);

tl.to(
  dummy,
  {
    x: window.innerWidth - 40,
    yoyo: true,
    duration: 2,
    repeat: 1,
    onUpdate() {
      gsap.set(".mouse", {
        x: dummy.x,
        y: dummy.y,
        opacity: 1
      });
      const event = new MouseEvent("mousemove", {
        view: window,
        bubbles: true,
        cancelable: true,
        clientX: dummy.x,
        clientY: dummy.y
      });

      window.dispatchEvent(event);
    },
    onComplete() {
      gsap.to(".mouse", {
        opacity: 0
      });
    }
  },
  ">"
);

tl.to(
  "button",
  {
    opacity: 0,
    delay: 0.5
  },
  ">"
);