DimensionPicker

"use client";

import * as React from "react";
import type { DimensionKey } from "@/lib/ledger/accounting.types";
import { cn } from "@/lib/ledger/cn";

const LABELS: Record<DimensionKey, string> = {
  classId: "Class",
  customerId: "Customer",
  departmentId: "Department",
  entityId: "Entity",
  locationId: "Location",
  productId: "Product",
  projectId: "Project",
  vendorId: "Vendor",
};

const OPTIONS: Record<DimensionKey, string[]> = {
  classId: ["Core", "New product"],
  customerId: ["Contoso", "Fabrikam", "Tailspin"],
  departmentId: ["G&A", "Engineering", "Sales", "Marketing"],
  entityId: ["Northwind Ltd", "Northwind GmbH", "Northwind Inc"],
  locationId: ["London", "Berlin", "New York"],
  productId: ["Platform", "Services"],
  projectId: ["Atlas", "Beacon"],
  vendorId: ["Baker & Co", "Vertex Cloud", "Meridian Legal"],
};

export interface DimensionPickerProps {
  className?: string;
  onValueChange: (value: Partial<Record<DimensionKey, string>>) => void;
  /** Rendered from what the chosen account demands, not a global list. */
  required: DimensionKey[];
  value: Partial<Record<DimensionKey, string>>;
}

/** Entity is always required and always visible. */
export function DimensionPicker({ required, value, onValueChange, className }: DimensionPickerProps) {
  const keys = React.useMemo(() => {
    const set = new Set<DimensionKey>(["entityId", ...required]);
    return [...set];
  }, [required]);

  return (
    <div className={cn("flex flex-wrap gap-1", className)}>
      {keys.map((key) => {
        const missing = !value[key];
        return (
          <label className="block" key={key}>
            <span className="sr-only">{LABELS[key]}</span>
            <select
              aria-invalid={missing}
              className={cn(
                "h-8 rounded-sm border bg-surface px-2 text-caption outline-none focus-visible:border-accent focus-visible:ring-2 focus-visible:ring-accent-subtle",
                missing ? "border-negative text-text-tertiary" : "border-border",
              )}
              onChange={(e) => onValueChange({ ...value, [key]: e.target.value || undefined })}
              value={value[key] ?? ""}
            >
              <option value="">{LABELS[key]}…</option>
              {OPTIONS[key].map((o) => (
                <option key={o} value={o}>
                  {o}
                </option>
              ))}
            </select>
          </label>
        );
      })}
    </div>
  );
}