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 | null;
      popupKey: number;
      resolve: (value: boolean) => void;
    } | null
  >(null);
  const [selectedPropertyId, setSelectedPropertyId] = useState("");

  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;

  // Render property selection dialog if no propertyId provided
  const propertySelectionDialog = popup && !popup.propertyId
    ? (() => {
      return (
        <div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-30 z-50">
          <div class="bg-white p-6 rounded shadow-lg w-full max-w-md space-y-4">
            <h3 class="text-xl font-bold mb-2">Select Property</h3>
            <select
              class="border p-2 rounded w-full"
              value={selectedPropertyId}
              onInput={(e) => setSelectedPropertyId(e.currentTarget.value)}
            >
              <option value="">-- Select a property --</option>
              {properties.map((p) => (
                <option key={p.id} value={p.id}>
                  {p.title} - {p.address_1}
                </option>
              ))}
            </select>
            <div class="flex justify-end gap-2 mt-4">
              <button
                type="button"
                class="px-4 py-2 rounded border"
                onClick={() => {
                  popup.resolve(false);
                  setPopup(null);
                }}
              >
                Cancel
              </button>
              <button
                type="button"
                class="px-4 py-2 rounded bg-blue-600 text-white"
                disabled={!selectedPropertyId}
                onClick={() => {
                  setPopup({ ...popup, propertyId: selectedPropertyId });
                }}
              >
                Continue
              </button>
            </div>
          </div>
        </div>
      );
    })()
    : null;

  return [popAddLease, popupAddLeaseDialog || propertySelectionDialog] as const;
}