import { AutoSaveTextarea } from "@/components/AutoSaveTextarea";
import { pb } from "@/lib/pocketbase";
import type { Location } from "@/lib/types";

/**
 * Renders an editable location form
 */
export const LocationEditForm = ({ location }: { location: Location }) => {
  async function saveLocationName(name: string) {
    await pb.collection("documents").update(location.id, {
      data: {
        ...location.data,
        location: {
          ...location.data.location,
          name,
        },
      },
    });
  }

  async function saveLocationDescription(description: string) {
    await pb.collection("documents").update(location.id, {
      data: {
        ...location.data,
        location: {
          ...location.data.location,
          description,
        },
      },
    });
  }

  return (
    <div className="">
      <AutoSaveTextarea
        multiline={false}
        value={location.data.location.name}
        onSave={saveLocationName}
      />
      <AutoSaveTextarea
        value={location.data.location.description}
        onSave={saveLocationDescription}
      />
    </div>
  );
};