import { type ReactNode, createContext, useContext } from "react";

import { Button } from "./button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "./dialog";

const FormCancelContext = createContext<string | undefined>(undefined);

export function FormDialog({
  open,
  onOpenChange,
  title,
  cancelLabel,
  children,
  wide = false,
  formActions = false,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: string;
  cancelLabel: string;
  children: ReactNode;
  wide?: boolean;
  formActions?: boolean;
}) {
  return (
    <Dialog onOpenChange={onOpenChange} open={open}>
      <DialogContent
        className={`max-h-[calc(100dvh-2rem)] overflow-y-auto ${wide ? "sm:max-w-3xl" : "sm:max-w-xl"}`}
        showCloseButton={false}
      >
        <DialogHeader>
          <DialogTitle className="text-xl">{title}</DialogTitle>
        </DialogHeader>
        <FormCancelContext.Provider value={formActions ? cancelLabel : undefined}>
          {children}
        </FormCancelContext.Provider>
        {!formActions && (
          <DialogFooter>
            <DialogClose render={<Button type="button" variant="outline" />}>
              {cancelLabel}
            </DialogClose>
          </DialogFooter>
        )}
      </DialogContent>
    </Dialog>
  );
}

export function FormActions({ children }: { children: ReactNode }) {
  const cancelLabel = useContext(FormCancelContext);
  return (
    <DialogFooter className="border-t pt-4">
      {children}
      {cancelLabel && (
        <DialogClose render={<Button type="button" variant="outline" />}>{cancelLabel}</DialogClose>
      )}
    </DialogFooter>
  );
}