import CategorySelect from "./CategorySelect";
import { asTree } from "../categoryTree";

/**
 * Lagerort-Auswahl als aufklappbarer Baum – dieselbe Darstellung wie bei den
 * Kategorien, denn Lagerorte sind genauso verschachtelt (Hedingen → Kallax →
 * Fach Oben Links → Oben). Vorher stand überall ein flaches <select>, in dem
 * jede Zeile den ganzen Pfad ausschrieb; Geschwister standen dadurch nur
 * zufällig beieinander.
 *
 * `CategorySelect` kann beides – seine IDs dürfen Zeichenketten sein, und
 * Lagerort-Codes sind welche. Hier kommt nur der Baumaufbau dazu und die
 * Umrechnung "" ↔ null, damit die Aufrufstellen weiter mit dem leeren String
 * für „kein Ort" arbeiten wie beim <select> zuvor.
 */
export default function LocationSelect({
  value,
  onChange,
  locations,
  rootLabel = "– ohne –",
  extraOptions = [],
  showRoot = true,
  disabled = false,
  title,
}) {
  return (
    <CategorySelect
      value={value === "" || value == null ? null : value}
      onChange={(id) => onChange(id == null ? "" : id)}
      // Nach Namen sortieren, bevor der Baum entsteht: Der Server sortiert
      // zeichenweise, dort stuende „Fach oben Rechts" hinter „Fach Unten
      // Rechts". asTree uebernimmt die Reihenfolge der Geschwister unveraendert.
      nodes={asTree([...(locations || [])].sort((a, b) => a.name.localeCompare(b.name, "de")))}
      rootLabel={rootLabel}
      extraOptions={extraOptions}
      showRoot={showRoot}
      disabled={disabled}
      title={title}
    />
  );
}