// islands/AsyncYesNoPop.ts
import { useState } from "preact/hooks";
import YesNoPopup from "./YesNoPopup.tsx";

export function AsyncYesNoPop() {
  const [popupKey, setPopupKey] = useState(0);
  const [popup, setPopup] = useState<
    {
      question: string;
      resolve: (value: boolean) => void;
    } | null
  >(null);

  // Show the popup and return a Promise for the answer
  const ask = (question: string, popupKey: number): Promise<boolean> => {
    return new Promise((resolve) => {
      setPopupKey(popupKey);
      setPopup({ question, resolve });
    });
  };

  // Render the popup if needed
  const popupElement = popup
    ? (
      <YesNoPopup
        key={popupKey}
        question={popup.question}
        onAnswer={(answer) => {
          popup.resolve(answer);
          setPopup(null);
        }}
      />
    )
    : null;

  return [ask, popupElement] as const;
}