import type { ComponentType, SVGProps } from 'react'

/**
 * Los íconos de las opciones de un campo `segmented`, por el nombre que manda
 * el catálogo (`Option.icon`).
 *
 * Dibujados acá y no tomados de la librería de íconos: lo que tienen que
 * mostrar es el piso visto desde arriba, y ningún ícono genérico distingue una
 * traba de rectángulos de unas lajas. Siguen las medidas de esa librería —24
 * de lado, trazo de 1.5, puntas redondas— para no desentonar al lado de ella.
 */

type Icon = ComponentType<SVGProps<SVGSVGElement>>

function Frame({ children, ...props }: SVGProps<SVGSVGElement>) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.5}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
      {...props}
    >
      <rect x="3" y="3" width="18" height="18" rx="2" />
      {children}
    </svg>
  )
}

/** Tres hileras de rectángulos trabados, como un piso de corte regular. */
function RegularStone(props: SVGProps<SVGSVGElement>) {
  return (
    <Frame {...props}>
      <path d="M3 9h18M3 15h18M12 3v6M8 9v6M16 9v6M12 15v6" />
    </Frame>
  )
}

/** Lajas de lados quebrados, sin una sola línea recta de borde a borde. */
function IrregularStone(props: SVGProps<SVGSVGElement>) {
  return (
    <Frame {...props}>
      <path d="M3 10l5-1 3-6M8 9l7 2 6-1M8 9l2 6-7 1M10 15l3 6M15 11l1 5-6-1M16 16l5 1" />
    </Frame>
  )
}

const ICONS: Record<string, Icon> = {
  regular_stone: RegularStone,
  irregular_stone: IrregularStone,
}

/** El ícono de una opción, o nada si el catálogo no le dio uno o el nombre no está acá. */
export function optionIcon(name: string | null): Icon | null {
  return name ? (ICONS[name] ?? null) : null
}

/** Los nombres que este registro sabe dibujar. Es lo que el test compara con el catálogo. */
export function optionIconNames(): string[] {
  return Object.keys(ICONS)
}