ApiCore/ApiCore-Frontend/src/components/task-related-field.tsx

"use client";

import { useQuery } from "@tanstack/react-query";
import { TaskRelatedType } from "@/lib/tasks/types";
import {
  TASK_RELATED_TYPES,
  TASK_RELATED_TYPE_LABELS,
} from "@/lib/tasks/labels";
import { fetchApiaries } from "@/lib/apiaries/api";
import { fetchColonies } from "@/lib/colonies/api";
import { fetchHoneyBatches } from "@/lib/honey-batches/api";
import { fetchQueens } from "@/lib/queens/api";
import { fetchStorageContainers } from "@/lib/storage/api";
import { Label } from "@/components/ui/label";
import { EnumSelect } from "@/components/form/enum-select";
import { RecordSelect } from "@/components/form/record-select";

interface RelatedOption {
  id: string;
  label: string;
}

interface TaskRelatedFieldProps {
  idPrefix: string;
  relatedType: TaskRelatedType;
  relatedId: string;
  onRelatedTypeChange: (relatedType: TaskRelatedType) => void;
  onRelatedIdChange: (relatedId: string) => void;
}

/**
 * Picks what a task refers to. The reference is polymorphic, so the second
 * select only loads the list matching the chosen type, and GENERAL has no
 * record to point at at all.
 *
 * A task created from an inspection carries the reference automatically, but
 * it stays editable: a task filed against the wrong colony sends a beekeeper
 * to the wrong hive.
 */
export function TaskRelatedField({
  idPrefix,
  relatedType,
  relatedId,
  onRelatedTypeChange,
  onRelatedIdChange,
}: TaskRelatedFieldProps) {
  const colonies = useQuery({
    queryKey: ["colonies"],
    queryFn: () => fetchColonies(),
    enabled: relatedType === "COLONY",
  });
  const apiaries = useQuery({
    queryKey: ["apiaries"],
    queryFn: () => fetchApiaries(),
    enabled: relatedType === "APIARY",
  });
  const queens = useQuery({
    queryKey: ["queens"],
    queryFn: () => fetchQueens(),
    enabled: relatedType === "QUEEN",
  });
  const honeyBatches = useQuery({
    queryKey: ["honey-batches"],
    queryFn: () => fetchHoneyBatches(),
    enabled: relatedType === "HONEY_BATCH",
  });
  const containers = useQuery({
    queryKey: ["storage-containers"],
    queryFn: () => fetchStorageContainers(),
    enabled: relatedType === "STORAGE",
  });

  const optionsByType: Record<TaskRelatedType, RelatedOption[]> = {
    COLONY: (colonies.data ?? []).map((colony) => ({
      id: colony.id,
      label: colony.code,
    })),
    APIARY: (apiaries.data ?? []).map((apiary) => ({
      id: apiary.id,
      label: apiary.name,
    })),
    QUEEN: (queens.data ?? []).map((queen) => ({
      id: queen.id,
      label: queen.code,
    })),
    HONEY_BATCH: (honeyBatches.data ?? []).map((honeyBatch) => ({
      id: honeyBatch.id,
      label: honeyBatch.batchNumber,
    })),
    STORAGE: (containers.data ?? []).map((container) => ({
      id: container.id,
      label: container.code,
    })),
    GENERAL: [],
  };
  const isLoadedByType: Record<TaskRelatedType, boolean> = {
    COLONY: colonies.data !== undefined,
    APIARY: apiaries.data !== undefined,
    QUEEN: queens.data !== undefined,
    HONEY_BATCH: honeyBatches.data !== undefined,
    STORAGE: containers.data !== undefined,
    GENERAL: true,
  };
  // undefined while loading, so the select says so instead of guessing.
  const options = isLoadedByType[relatedType] ? optionsByType[relatedType] : undefined;

  return (
    <>
      <div className="flex flex-col gap-2">
        <Label htmlFor={`${idPrefix}-type`}>Bezug</Label>
        <EnumSelect
          id={`${idPrefix}-type`}
          value={relatedType}
          onChange={(next) => {
            onRelatedTypeChange(next);
            // The old id belongs to the old type's records, so it would point
            // at nothing after the switch.
            onRelatedIdChange("");
          }}
          values={TASK_RELATED_TYPES}
          labels={TASK_RELATED_TYPE_LABELS}
        />
      </div>
      {relatedType === "GENERAL" ? null : (
        <div className="flex flex-col gap-2">
          <Label htmlFor={`${idPrefix}-record`}>
            {TASK_RELATED_TYPE_LABELS[relatedType]}
          </Label>
          <RecordSelect
            id={`${idPrefix}-record`}
            value={relatedId}
            onChange={onRelatedIdChange}
            items={options}
            getLabel={(option) => option.label}
            placeholder="Datensatz wählen"
          />
        </div>
      )}
    </>
  );
}