import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
import { pb } from "@/lib/pocketbase";
import type { Monster } from "@/lib/types";
import { useDocumentCache } from "@/context/document/hooks";

/**
 * Renders an editable monster row
 */
export const MonsterEditForm = ({ monster }: { monster: Monster }) => {
  const { dispatch } = useDocumentCache();
  async function saveMonsterName(name: string) {
    const updated: Monster = await pb
      .collection("documents")
      .update(monster.id, {
        data: {
          ...monster.data,
          name,
        },
      });
    dispatch({ type: "setDocument", doc: updated });
  }

  return (
    <div className="">
      <AutoSaveTextarea
        multiline={false}
        value={monster.data.name}
        onSave={saveMonsterName}
      />
    </div>
  );
};