"use client";

import React from "react";
import type { BuildingDto, FloorDto } from "../types";
import { groupFloorsByBuilding } from "../utils/building-structure";

export type FloorOption = Pick<FloorDto, "id" | "name"> & {
  buildingId?: string | null;
};

interface FloorSelectOptionsProps {
  buildings?: ReadonlyArray<Pick<BuildingDto, "id" | "name">>;
  floors: ReadonlyArray<FloorOption>;
}

/**
 * Floor <option>s for a <select>, grouped by building via <optgroup> as soon
 * as the project has buildings. The caller renders its own empty option
 * ("Ohne Etage") before these.
 */
export function FloorSelectOptions({
  buildings = [],
  floors,
}: FloorSelectOptionsProps) {
  if (!buildings.length) {
    return (
      <>
        {floors.map((floor) => (
          <option key={floor.id} value={floor.id}>
            {floor.name}
          </option>
        ))}
      </>
    );
  }
  return (
    <>
      {groupFloorsByBuilding(floors, buildings).map((group) => (
        <optgroup key={group.buildingId ?? "unassigned"} label={group.label}>
          {group.floors.map((floor) => (
            <option key={floor.id} value={floor.id}>
              {floor.name}
            </option>
          ))}
        </optgroup>
      ))}
    </>
  );
}