import type { Dispatch, SetStateAction } from "react";
import type { ClubFormState } from "@/components/network-admin-client-config";
import { readNetworkAdminError } from "@/components/network-admin-mutation-helpers";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

type NetworkAdminCreateClubFormProps = {
  busy: boolean;
  clubForm: ClubFormState;
  setClubForm: Dispatch<SetStateAction<ClubFormState>>;
  emptyClubForm: ClubFormState;
  runMutation: (task: () => Promise<void>, successMessage: string) => Promise<void>;
};

export function NetworkAdminCreateClubForm({
  busy,
  clubForm,
  setClubForm,
  emptyClubForm,
  runMutation,
}: NetworkAdminCreateClubFormProps) {
  return (
    <div className="mt-6 grid gap-3 md:grid-cols-[1.5fr_auto]">
      <Input
        value={clubForm.atcSportclubId}
        onChange={(event) => setClubForm((current) => ({ ...current, atcSportclubId: event.target.value }))}
        placeholder="ATC sportclub id (ej. 106)"
        disabled={busy}
      />
      <Button
        loading={busy}
        disabled={busy || clubForm.atcSportclubId.trim().length === 0}
        onClick={() => {
          const atcId = clubForm.atcSportclubId.trim();
          return runMutation(async () => {
            const response = await fetch("/api/network", {
              method: "POST",
              headers: { "content-type": "application/json" },
              body: JSON.stringify({
                atcSportclubId: atcId,
              }),
            });

            if (!response.ok) throw new Error(await readNetworkAdminError(response));
            setClubForm(emptyClubForm);
          }, `Club ATC agregado: ${atcId}`);
        }}
      >
        Add club
      </Button>
    </div>
  );
}