import { Cursor, Eraser, Hand, PaintBrush, DropHalf, MagicWand } from "@phosphor-icons/react";
import { commandIds } from "@commands/ids";
import type { AppStore } from "@editor/store";
import type { InteractionMode, ToolId } from "@editor/tools";
import { availableToolIds } from "@editor/tools";
import { labelForTool } from "./toolLabels";

export type ToolOverlayProps = {
  activeTool: ToolId;
  interactionMode: InteractionMode;
  dispatch: AppStore["dispatch"];
};

export function ToolOverlay({ activeTool, interactionMode, dispatch }: ToolOverlayProps) {
  return (
    <nav
      aria-label="Tools"
      className="pointer-events-auto flex w-20 flex-col items-center gap-3 rounded-full p-2 text-white backdrop-blur-xl"
    >
      {availableToolIds.map((tool) => {
        const active = isToolHighlighted(tool, activeTool, interactionMode);
        const Icon = iconForTool(tool);

        return (
          <button
            key={tool}
            type="button"
            aria-label={labelForTool(tool)}
            aria-pressed={active}
            title={labelForTool(tool)}
            className={buttonClass(active)}
            onClick={() => dispatch(commandIds.toolSetActive, { tool })}
          >
            <Icon size={24} weight={active ? "fill" : "regular"} />
          </button>
        );
      })}
    </nav>
  );
}

function iconForTool(tool: ToolId) {
  switch (tool) {
    case "brush":
      return PaintBrush;
    case "eraser":
      return Eraser;
    case "chromaKey":
      return DropHalf;
    case "magicWand":
      return MagicWand;
    case "pan":
      return Hand;
    case "select":
      return Cursor;
  }
}

function isToolHighlighted(tool: ToolId, activeTool: ToolId, interactionMode: InteractionMode) {
  if (interactionMode.type === "temporary-pan") return tool === "pan";
  return activeTool === tool;
}

function buttonClass(active: boolean) {
  const base = "inline-flex size-12 items-center justify-center rounded-full text-xs font-medium transition focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30";
  return active ? `${base} bg-white text-black hover:bg-white hover:text-black` : `${base} text-white/75 hover:bg-white/10 hover:text-white`;
}