/**
 * Modell-Typenschild und Vier-Ringe-Zeichen.
 *
 * Beide wechseln mit dem Erscheinungsbild: auf dunklem Grund die negative,
 * auf hellem die positive Fassung. Es gibt nur die Modelle, für die ein
 * Typenschild vorliegt — für alles andere zeigt die App nichts statt eines
 * falschen Schildes.
 */

import ringeHell from "../assets/audi/audi-rings-white.svg"
import ringeDunkel from "../assets/audi/audi-rings-black.svg"
import { useTheme } from "../theme"

const SCHILDER = import.meta.glob<string>("../assets/audi/typenschilder/*.svg", {
  eager: true,
  import: "default",
  query: "?url",
})

/**
 * Erkennt aus dem Modellnamen das passende Typenschild und trennt ab, was
 * darüber hinaus im Namen steht.
 *
 * Das ist die Regel aus dem alten Panel (`badge()`): Der Modellname selbst
 * steckt schon im Schild — daneben gehört nur, was danach kommt („Avant
 * competition"). Sonst stünde „RS 4" zweimal da.
 */
export function schildErkennen(
  titel: string,
): { kuerzel: string; zusatz: string } | null {
  const treffer = /^\s*(RS\s?[34567]|S\s?Q7|S\s?3)\b/i.exec(titel)
  if (!treffer?.[1]) return null
  const kuerzel = treffer[1].replace(/\s+/g, "").toLowerCase()
  return { kuerzel, zusatz: titel.slice(treffer[0].length).trim() }
}

export function Typenschild({ modell, hoehe = 22 }: { modell: string; hoehe?: number }) {
  const [theme] = useTheme()
  const erkannt = schildErkennen(modell)
  if (!erkannt) return null

  const variante = theme === "nacht" ? "negative" : "positive"
  const quelle = SCHILDER[`../assets/audi/typenschilder/${erkannt.kuerzel}-${variante}.svg`]
  if (!quelle) return null

  return <img src={quelle} alt={modell} height={hoehe} style={{ height: hoehe, width: "auto" }} />
}

export function VierRinge({ hoehe = 20 }: { hoehe?: number }) {
  const [theme] = useTheme()
  return (
    <img
      src={theme === "nacht" ? ringeHell : ringeDunkel}
      alt="Audi"
      height={hoehe}
      style={{ height: hoehe, width: "auto" }}
    />
  )
}
