interface IconLine {
  x1: number;
  y1: number;
  x2: number;
  y2: number;
  opacity?: number;
}

interface IconDefinition {
  lines: [IconLine, IconLine, IconLine];
  rotation?: number;
  group?: string;
}

const CENTER = 7;

const collapsed: IconLine = {
  x1: CENTER,
  y1: CENTER,
  x2: CENTER,
  y2: CENTER,
  opacity: 0,
};

menu: {
  lines: [
    { x1: 2, y1: 3.5, x2: 12, y2: 3.5 },
    { x1: 2, y1: 7, x2: 12, y2: 7 },
    { x1: 2, y1: 10.5, x2: 12, y2: 10.5 },
  ],
}

minus: {
  lines: [
    { x1: 2, y1: 7, x2: 12, y2: 7 },
    collapsed,
    collapsed
  ],
}

check: {
  lines: [
    { x1: 2, y1: 7.5, x2: 5.5, y2: 11 },
    { x1: 5.5, y1: 11, x2: 12, y2: 3 },
    collapsed,
  ],
}

// Plus and cross share the same lines but rotate
const plusLines: [IconLine, IconLine, IconLine] = [
  { x1: 7, y1: 2, x2: 7, y2: 12 },
  { x1: 2, y1: 7, x2: 12, y2: 7 },
  collapsed,
];

plus: { lines: plusLines, rotation: 0, group: "plus-cross" },
cross: { lines: plusLines, rotation: 45, group: "plus-cross" },

const shouldRotate = useMemo(() => {
  const prev = prevDefinitionRef.current;
  return prev.group && definition.group && prev.group === definition.group;
}, [definition]);

function AnimatedLine({ line, transition }: AnimatedLineProps) {
  return (
    <motion.line
      animate={{
        x1: line.x1,
        y1: line.y1,
        x2: line.x2,
        y2: line.y2,
        opacity: line.opacity ?? 1,
      }}
      transition={transition}
      strokeLinecap="round"
    />
  );
}

const defaultTransition: Transition = {
  ease: [0.19, 1, 0.22, 1],
  duration: 0.4,
};

const reducedMotion = useReducedMotion() ?? false;
const activeTransition = reducedMotion ? { duration: 0 } : transition;

import { MorphingIcon } from "@/components/morphing-icon";

function IconButton() {
  const [icon, setIcon] = useState("menu");

  return (
    <button onClick={() => setIcon(icon === "menu" ? "cross" : "menu")}>
      <MorphingIcon icon={icon} size={24} strokeWidth={1.5} />
    </button>
  );
}