// islands/AsyncYesNoPop.ts
import { useState } from "preact/hooks";
import AddLeaseDialog from "./AddLeaseDialog.tsx";
import { Lease, Property } from "../../db/interfaces.ts";

export function PopAddLeaseDialog(leases: Lease[], properties: Property[]) {
  const [popup, setPopup] = useState<
    {
      propertyId: string;
      popupKey: number;
      resolve: (value: boolean) => void;
    } | null
  >(null);

  function getPropertyInfo(propertyId: string) {
    const property = properties.find((p) => p.id === propertyId);
    return property
      ? {
        title: property.title,
        address: property.address_1,
        price: property.price,
      }
      : { title: "", address: "", price: undefined };
  }

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

  // Render the popup if needed
  const popupAddLeaseDialog = popup
    ? (() => {
      const { title, address, price } = getPropertyInfo(popup.propertyId);
      return (
        <AddLeaseDialog
          leases={leases}
          propertyId={popup.propertyId}
          propertyTitle={title || ""}
          propertyAddress={address || ""}
          propertyCost={price || undefined}
          popupKey={popup.popupKey}
          onClose={() => {
            popup.resolve(false);
            setPopup(null);
          }}
        />
      );
    })()
    : null;

  return [popAddLease, popupAddLeaseDialog] as const;
}