import { Brush, Circle, Crosshair, Dot, Eraser, Grid2x2, Hand, Move, PaintBucket, RotateCw, Scaling, Spline, Square, SquareDashed, Stamp } from 'lucide-react'
import { type MapTool, MAP_TOOLS, useMapStore } from '../store/mapStore'
import { Button } from '@/components/ui/button'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'

/** Tool id → lucide icon. */
export const TOOL_ICONS: Record<MapTool, typeof Hand> = {
  pan: Hand,
  move: Move,
  rotate: RotateCw,
  scale: Scaling,
  stamp: Stamp,
  tile: Grid2x2,
  paint: Brush,
  fill: PaintBucket,
  rect: SquareDashed,
  circle: Circle,
  path: Spline,
  dot: Dot,
  area: Square,
  erase: Eraser,
  slice: Crosshair,
}

/** A vertical list of tool buttons for the given tool ids, wired to the store. */
export default function MapToolButtons({ tools }: { tools: MapTool[] }) {
  const tool = useMapStore((s) => s.tool)
  const setTool = useMapStore((s) => s.setTool)
  const defs = MAP_TOOLS.filter((t) => tools.includes(t.id))

  return (
    <div className="flex flex-col gap-1">
      {defs.map((t) => {
        const Icon = TOOL_ICONS[t.id]
        return (
          <Tooltip key={t.id}>
            <TooltipTrigger asChild>
              <Button
                type="button"
                variant={tool === t.id ? 'default' : 'outline'}
                size="sm"
                className="w-full justify-start gap-2.5"
                onClick={() => setTool(t.id)}
              >
                <Icon className="size-4" />
                {t.label}
              </Button>
            </TooltipTrigger>
            <TooltipContent side="left">{t.hint}</TooltipContent>
          </Tooltip>
        )
      })}
    </div>
  )
}