import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
import { pb } from "@/lib/pocketbase";
import type { Scene } from "@/lib/types";
import { useQueryClient } from "@tanstack/react-query";

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

  async function saveScene(text: string) {
    await pb.collection("documents").update(scene.id, {
      data: {
        ...scene.data,
        scene: {
          text,
        },
      },
    });
    queryClient.invalidateQueries({
      queryKey: ["relationship"],
    });
  }

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