import { useState } from "react";
import { removeProjectItem, updateProjectItem } from "~/fns/projects";
import { useAction } from "~/hooks/use-action";
import { ItemTitle } from "./ItemTitle";
import type { ProjectData, ProjectField, ProjectItem } from "./ItemTitle";
import { InlineSelect, inputClass } from "~/ui/Field";
import { EmptyState } from "~/ui/EmptyState";
import { cn } from "~/utils/cn";
type Ref = { owner: string; number: number };
function Cell({
projectRef,
item,
field,
canWrite,
}: {
projectRef: Ref;
item: ProjectItem;
field: ProjectField;
canWrite: boolean;
}) {
const current = item.values[field.id] ?? "";
const [draft, setDraft] = useState(current);
const update = useAction(updateProjectItem);
const save = (value: string) => {
if (value === current) return;
void update.run({ data: { ...projectRef, itemId: item.id, fieldId: field.id, value: value || null } });
};
if (!canWrite) return <span className="text-kumo-default">{current}</span>;
if (field.kind === "single_select")
return (
<InlineSelect
label={field.name}
value={current}
onValueChange={save}
className="w-full bg-transparent shadow-none ring-transparent hover:ring-kumo-line"
options={[{ value: "", label: "—" }, ...field.options.map((option) => ({ value: option, label: option }))]}
/>
);