import { html } from "htm/preact";
import { useEffect, useState } from "preact/hooks";
import { getArrow, getBoxToBoxArrow } from "perfect-arrows";

interface ArrowProps {
  from: string | Element; // Element selector
  to: string | Element; // Element selector
  fromSide: "top" | "bottom" | "left" | "right";
  toSide: "top" | "bottom" | "left" | "right";
}

export function Arrow({ from, to, fromSide, toSide }: ArrowProps) {
  // Rerender 5fps
  const [, setTick] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setTick((t) => t + 1);
    }, 200);
    return () => clearInterval(interval);
  }, []);

  const fromElem =
    from instanceof Element ? from : document.querySelector(from);
  const toElem = to instanceof Element ? to : document.querySelector(to);

  if (!fromElem || !toElem) {
    // console.error("Arrow: from or to element not found", { fromElem, toElem });
    return null;
  }

  const fromRect = fromElem.getBoundingClientRect();
  const toRect = toElem.getBoundingClientRect();

  const arrowOptions = {
    bow: 0.2,
    stretch: 0.5,
    stretchMin: 40,
    stretchMax: 420,
    padStart: 0,
    padEnd: 0,
    flip: false,
    straights: false,
  };

  // const arrow = getBoxToBoxArrow(
  //   fromRect.left,
  //   fromRect.top,
  //   fromRect.width,
  //   fromRect.height,
  //   toRect.left,
  //   toRect.top,
  //   toRect.width,
  //   toRect.height,
  //   arrowOptions,
  // );

  const arrow = getArrow(
    ...getSide(fromRect, fromSide),
    ...getSide(toRect, toSide),
    arrowOptions,
  );

  const [sx, sy, cx, cy, ex, ey, ae, as, ec] = arrow;

  const endAngleAsDegrees = ae * (180 / Math.PI);

  return html`
    <svg
      viewBox="0 0 1280 720"
      style=${{
        width: 1280,
        height: 720,
        position: "fixed",
        top: 0,
        left: 0,
        pointerEvents: "none",
      }}
      stroke="#000"
      fill="#000"
      strokeWidth=${3}
    >
      <circle cx=${sx} cy=${sy} r=${4} />
      <path d=${`M${sx},${sy} Q${cx},${cy} ${ex},${ey}`} fill="none" />
      <polygon
        points="0,-3 6,0, 0,3"
        transform=${`translate(${ex},${ey}) rotate(${endAngleAsDegrees})`}
      />
    </svg>
  `;
}

function getSide(
  box: DOMRect,
  side: "top" | "bottom" | "left" | "right",
): [number, number] {
  switch (side) {
    case "top":
      return [box.left + box.width / 2, box.top];
    case "bottom":
      return [box.left + box.width / 2, box.bottom];
    case "left":
      return [box.left, box.top + box.height / 2];
    case "right":
      return [box.right, box.top + box.height / 2];
  }
}