// A sheet's pinned footer that forms in its scrolling body hand their actions to; outside a sheet they stay inline.
import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
import { createPortal } from "react-dom";

type FooterSlot = {
  target: HTMLDivElement | null;
  setTarget: (element: HTMLDivElement | null) => void;
  claims: number;
  claim: () => () => void;
};

const Slot = createContext<FooterSlot | null>(null);

export const OverlayFooterHost = ({ children }: { children: ReactNode }) => {
  const [target, setTarget] = useState<HTMLDivElement | null>(null);
  const [claims, setClaims] = useState(0);
  const claim = useCallback(() => {
    setClaims((count) => count + 1);
    return () => setClaims((count) => count - 1);
  }, []);
  const slot = useMemo(() => ({ target, setTarget, claims, claim }), [target, claims, claim]);
  return <Slot.Provider value={slot}>{children}</Slot.Provider>;
};

export const OverlayFooter = () => {
  const slot = useContext(Slot);
  if (!slot || slot.claims === 0) return null;
  return <div ref={slot.setTarget} className="ak-overlay__footer" />;
};

// Submit buttons rendered here sit outside their <form> in the DOM, so they must name it with `form=`.
export const OverlayActions = ({ className, children }: { className?: string; children: ReactNode }) => {
  const slot = useContext(Slot);
  const claim = slot?.claim;
  useEffect(() => claim?.(), [claim]);
  if (!slot) return <div className={className}>{children}</div>;
  return slot.target ? createPortal(children, slot.target) : null;
};