"use client";
// Forms that run a server action and show its answer, with buttons that show when they're working.
import { useActionState } from "react";
import { useFormStatus } from "react-dom";
import { Button } from "@/components/ui/button";
import type { ActionState } from "@/lib/actions";
import { cn } from "@/lib/utils";

type Action = (state: ActionState, form: FormData) => Promise<ActionState>;

export function ActionForm({
  action,
  fields = {},
  className,
  children,
}: {
  action: Action;
  /** Hidden fields sent with the form. */
  fields?: Record<string, string | number>;
  className?: string;
  children: React.ReactNode;
}) {
  const [state, formAction] = useActionState(action, null);
  return (
    <form action={formAction} className={cn("space-y-3", className)}>
      {Object.entries(fields).map(([name, value]) => (
        <input key={name} type="hidden" name={name} value={value} />
      ))}
      {children}
      <FormMessage state={state} />
    </form>
  );
}

export function FormMessage({ state }: { state: ActionState }) {
  if (state?.error) return <ErrorText>{state.error}</ErrorText>;
  if (state?.notice)
    return (
      <p role="status" className="text-sm text-muted-foreground">
        {state.notice}
      </p>
    );
  return null;
}

export function ErrorText({ children }: { children: React.ReactNode }) {
  return (
    <p role="alert" className="text-sm text-red-700 dark:text-red-400">
      {children}
    </p>
  );
}

/**
 * A submit button that shows pending while its form is being sent. With name and value, it's one of several
 * buttons in the form, and only shows pending when it was the one pressed. With confirm, it asks first.
 */
export function SubmitButton({
  name,
  value,
  pendingLabel,
  confirm,
  children,
  ...props
}: Omit<React.ComponentProps<typeof Button>, "type" | "name" | "value" | "onClick"> & {
  name?: string;
  value?: string;
  pendingLabel?: string;
  confirm?: string;
}) {
  const status = useFormStatus();
  const mine = status.pending && (name === undefined || status.data?.get(name) === value);
  return (
    <Button
      type="submit"
      name={name}
      value={value}
      disabled={status.pending}
      onClick={(e) => {
        if (confirm && !window.confirm(confirm)) e.preventDefault();
      }}
      {...props}
    >
      {mine ? (pendingLabel ?? children) : children}
    </Button>
  );
}