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

/**
 * Renders an editable scene form
 */
export const SceneEditForm = ({ scene }: { scene: Scene }) => {
  const { dispatch } = useDocumentCache();

  async function saveScene(text: string) {
    const updated: Scene = await pb.collection("documents").update(scene.id, {
      data: {
        ...scene.data,
        text,
      },
    });
    dispatch({ type: "setDocument", doc: updated });
  }

  return (
    <div className="">
      <AutoSaveTextarea value={scene.data.text} onSave={saveScene} />
    </div>
  );
};