import type { Dispatch, SetStateAction } from "react";
import type { VenueFormState, VenueStatus } 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 NetworkAdminCreateVenueFormProps = {
  busy: boolean;
  clubId: string;
  venueForm: VenueFormState;
  setVenueForms: Dispatch<SetStateAction<Record<string, VenueFormState>>>;
  emptyVenueForm: VenueFormState;
  statusOptions: readonly VenueStatus[];
  selectClassName: string;
  runMutation: (task: () => Promise<void>, successMessage: string) => Promise<void>;
};

export function NetworkAdminCreateVenueForm({
  busy,
  clubId,
  venueForm,
  setVenueForms,
  emptyVenueForm,
  statusOptions,
  selectClassName,
  runMutation,
}: NetworkAdminCreateVenueFormProps) {
  return (
    <div className="mt-3 grid gap-3 md:grid-cols-[1.2fr_1fr_1fr_auto]">
      <Input
        value={venueForm.name}
        onChange={(event) => setVenueForms((current) => ({ ...current, [clubId]: { ...venueForm, name: event.target.value } }))}
        placeholder="Venue name"
        disabled={busy}
      />
      <Input
        value={venueForm.slug}
        onChange={(event) => setVenueForms((current) => ({ ...current, [clubId]: { ...venueForm, slug: event.target.value } }))}
        placeholder="optional-slug"
        disabled={busy}
      />
      <select
        value={venueForm.status}
        onChange={(event) =>
          setVenueForms((current) => ({ ...current, [clubId]: { ...venueForm, status: event.target.value as VenueStatus } }))
        }
        disabled={busy}
        className={selectClassName}
      >
        {statusOptions.map((status) => (
          <option key={status} value={status}>
            {status}
          </option>
        ))}
      </select>
      <Button
        loading={busy}
        disabled={busy || venueForm.name.trim().length === 0}
        onClick={() =>
          runMutation(async () => {
            const response = await fetch(`/api/network/${clubId}/venues`, {
              method: "POST",
              headers: { "content-type": "application/json" },
              body: JSON.stringify({
                name: venueForm.name,
                slug: venueForm.slug || undefined,
                status: venueForm.status,
              }),
            });

            if (!response.ok) throw new Error(await readNetworkAdminError(response));
            setVenueForms((current) => ({ ...current, [clubId]: emptyVenueForm }));
          }, "Venue created")
        }
      >
        Add venue
      </Button>
    </div>
  );
}