/**
 * Löschweg für Listenzeilen — Wischen **und** ein sichtbares Menü.
 *
 * Behebt einen offenen Befund des Design-Audits (AUDIT_2026-08-10.md §4.1):
 * Im alten Panel war Löschen ausschließlich über eine Wischgeste erreichbar.
 * Wer mit Sprachausgabe oder Schaltersteuerung bedient, führt keine
 * Wischgesten aus und konnte Fahrten und Tankvorgänge deshalb gar nicht
 * löschen. Das Menü ist immer da, ein richtiger Knopf, mit Tastatur erreichbar.
 */

import { useState, type ReactNode } from "react"

import { Popup, PopupMenuItem, SwipeRow } from "@audi-dash/ui"

import { SymbolMehr } from "../symbole"

export function Zeilenmenue({
  beiLoeschen,
  loeschFrage,
  kinder,
}: {
  beiLoeschen: () => void
  loeschFrage: string
  kinder: ReactNode
}) {
  const [menueOffen, setzeMenueOffen] = useState(false)

  const loeschen = () => {
    setzeMenueOffen(false)
    if (window.confirm(loeschFrage)) beiLoeschen()
  }

  return (
    <div className="dm-zeile">
      <SwipeRow onDelete={loeschen} className="dm-zeile__wisch">
        {kinder}
      </SwipeRow>
      <button
        type="button"
        className="dm-zeile__menue"
        aria-label="Weitere Aktionen"
        onClick={() => setzeMenueOffen(true)}
      >
        <SymbolMehr groesse={18} />
      </button>
      <Popup open={menueOffen} onClose={() => setzeMenueOffen(false)} variant="menu" anchor="center">
        <PopupMenuItem destructive onClick={loeschen}>
          Löschen
        </PopupMenuItem>
        <PopupMenuItem onClick={() => setzeMenueOffen(false)}>Abbrechen</PopupMenuItem>
      </Popup>
    </div>
  )
}
