---
const nodeColor = "#000";

const unevenLayerNumberOffset = 20;
const evenLayerNumberOffset = 10;

const graph = [
  [0, 1, 2],
  [3, 4],
  [5, 6, 7],
];
---

<script>
  const nodeClick = () => {
    const edges: NodeListOf<SVGLineElement> =
      document.querySelectorAll("line.edge");

    function delay(ms: number) {
      return new Promise((resolve) => setTimeout(resolve, ms));
    }

    async function processItems() {
      for (const edge of edges) {
        const length = edge.getTotalLength();
        edge.style.transition = `stroke-dashoffset 0.5s cubic-bezier(0.6, 0.6, 0, 1)`;
        edge.style.strokeDashoffset = `${-length}`;
        await delay(150);
      }

      await delay(150);
      edges.forEach((edge) => {
        const length = edge.getTotalLength();
        edge.style.transition = "unset";
        edge.style.strokeDashoffset = `${length}`;
      });
    }

    processItems();
  };

  const nodes = document.querySelectorAll("[id^=node-]");
  nodes.forEach((node) => {
    node.addEventListener("click", nodeClick);
  });

  const edges: NodeListOf<SVGLineElement> =
    document.querySelectorAll("line.edge");
  edges.forEach((edge) => {
    const length = edge.getTotalLength();
    edge.style.strokeDasharray = `${length}`;
    edge.style.strokeDashoffset = `${length}`;
  });
</script>

<style>
  @keyframes draw {
    to {
      stroke-dashoffset: -24;
    }
  }

  circle:hover {
    cursor: pointer;
    transition:
      fill 0.1s ease,
      stroke-width 0.1s ease;
    fill: #1d1d1d;
    stroke-width: 0.5;
  }

  .test:hover {
    stroke-dashoffset: -24;
    /* animation: draw 1s ease; */
  }
</style>

<svg viewBox="0 0 100 60">
  <rect width="100" height="100" fill="white"></rect>
  <defs>
    <linearGradient id="explosiveGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#A9A9A9; stop-opacity:0.1"></stop>
      <stop offset="25%" style="stop-color:#A9A9A9; stop-opacity:0.3"></stop>
      <stop offset="60%" style="stop-color:#FFA500; stop-opacity:0.7"></stop>
      <stop offset="70%" style="stop-color:#FF69B4; stop-opacity:0.95"></stop>
      <stop offset="100%" style="stop-color:#FF69B4; stop-opacity:1"></stop>
    </linearGradient>
  </defs>

  {
    graph.map((layer, index) => {
      return layer.map((n, innerIndex) => {
        const offset =
          index % 2 === 0 ? evenLayerNumberOffset : unevenLayerNumberOffset;
        return (
          <circle
            class="node"
            id={`node-${n}`}
            cx={20 + index * 30}
            cy={offset + innerIndex * 20}
            r="4"
            fill="transparent"
            stroke={nodeColor}
            stroke-width="0.2"
          />
        );
      });
    })
  }

  <!-- Edges towards second layer -->
  <line
    class="edge"
    x1="24"
    y1="10"
    x2="46"
    y2="20"
    stroke="url(#explosiveGradient)"
    stroke-width="0.4"></line>
  <line
    class="edge"
    x1="24"
    y1="10"
    x2="46"
    y2="40"
    stroke="url(#explosiveGradient)"
    stroke-width="0.4"></line>

  <line
    class="edge"
    x1="24"
    y1="30"
    x2="46"
    y2="20"
    stroke="url(#explosiveGradient)"
    stroke-width="0.4"></line>
  <line
    class="edge"
    x1="24"
    y1="30"
    x2="46"
    y2="40"
    stroke="url(#explosiveGradient)"
    stroke-width="0.4"></line>

  <line
    class="edge"
    x1="24"
    y1="50"
    x2="46"
    y2="20"
    stroke="url(#explosiveGradient)"
    stroke-width="0.4"></line>
  <line
    class="edge"
    x1="24"
    y1="50"
    x2="46"
    y2="40"
    stroke="url(#explosiveGradient)"
    stroke-width="0.4"></line>

  <!-- Edges towards third layer -->
  <line
    class="edge"
    x1="54"
    y1="20"
    x2="76"
    y2="10"
    stroke="url(#explosiveGradient)"
    stroke-width="0.4"></line>
  <line
    class="edge"
    x1="54"
    y1="20"
    x2="76"
    y2="30"
    stroke="url(#explosiveGradient)"
    stroke-width="0.4"></line>
  <line
    class="edge"
    x1="54"
    y1="20"
    x2="76"
    y2="50"
    stroke="url(#explosiveGradient)"
    stroke-width="0.4"></line>

  <line
    class="edge"
    x1="54"
    y1="40"
    x2="76"
    y2="10"
    stroke="url(#explosiveGradient)"
    stroke-width="0.4"></line>
  <line
    class="edge"
    x1="54"
    y1="40"
    x2="76"
    y2="30"
    stroke="url(#explosiveGradient)"
    stroke-width="0.4"></line>
  <line
    class="edge"
    x1="54"
    y1="40"
    x2="76"
    y2="50"
    stroke="url(#explosiveGradient)"
    stroke-width="0.4"></line>
</svg>