import { Folder, FolderOpen, Layers } from 'lucide-react'
import type { Folders } from '../api'
import { bytes } from '../format'

/** Die Ordnerübersicht neben der Galerie.
 *
 *  Kein aufklappbarer Baum, sondern eine flache Liste mit Einrückung. Bei
 *  einer Handvoll Ordner ist ein Aufklappmechanismus mehr Bedienung als
 *  Nutzen — und was man nicht aufklappen muss, kann man auch nicht zugeklappt
 *  übersehen. */
export function Ordner({
    daten,
    gewaehlt,
    onWahl,
}: {
    daten: Folders | null
    gewaehlt: string
    onWahl: (ordner: string) => void
}) {
    if (!daten) return null

    const zeile = (
        aktiv: boolean,
        kind: React.ReactNode,
        name: string,
        anzahl: number,
        groesse: number,
        tiefe = 0,
        onClick?: () => void,
    ) => (
        <button
            key={name + tiefe}
            onClick={onClick}
            className={`flex w-full items-center gap-2 rounded-md py-1.5 pr-2 text-left text-sm
                        transition-colors ${
                            aktiv
                                ? 'bg-flaeche-hoch text-schrift'
                                : 'text-schrift-leise hover:bg-flaeche-hoch/50 hover:text-schrift'
                        }`}
            style={{ paddingLeft: `${0.5 + tiefe * 0.85}rem` }}
        >
            <span className={aktiv ? 'text-akzent' : ''}>{kind}</span>
            <span className="flex-1 truncate font-mono text-xs" title={name}>
                {name}
            </span>
            <span className="shrink-0 text-[11px] tabular-nums text-schrift-leise">
                {anzahl}
            </span>
            <span className="w-14 shrink-0 text-right text-[11px] tabular-nums text-schrift-leise">
                {bytes(groesse)}
            </span>
        </button>
    )

    return (
        <aside className="w-full shrink-0 self-start rounded-lg border border-rand bg-flaeche p-2 lg:w-72">
            <h2 className="px-2 py-1 text-xs font-semibold text-schrift-leise">Ordner</h2>

            {zeile(
                gewaehlt === '',
                <Layers size={14} />,
                'Alle',
                daten.gesamt.files,
                daten.gesamt.bytes,
                0,
                () => onWahl(''),
            )}

            {daten.items.map((o) =>
                zeile(
                    gewaehlt === o.folder,
                    gewaehlt === o.folder ? <FolderOpen size={14} /> : <Folder size={14} />,
                    // Nur das letzte Stück anzeigen — der Weg dorthin steht
                    // schon in der Einrückung. Der volle Pfad hängt im title.
                    o.folder.split('/').pop() ?? o.folder,
                    o.files,
                    o.bytes,
                    o.tiefe,
                    () => onWahl(o.folder),
                ),
            )}

            {daten.wurzel.files > 0 && (
                <p className="mt-2 px-2 text-[11px] text-schrift-leise">
                    {daten.wurzel.files} Datei(en) liegen ohne Ordner direkt an der Wurzel — zu
                    sehen unter „Alle".
                </p>
            )}
        </aside>
    )
}