import { useState } from "preact/hooks";
import type { Property } from "../../db/interfaces.ts";

interface AddRentalDialogProps {
  properties: Property[];
  onClose?: () => void;
}

export default function AddRentalDialog(
  { properties, onClose }: AddRentalDialogProps,
) {
  const [form, setForm] = useState({
    title: "",
    address_1: "",
    city: "",
    state: "",
    price: "",
    image_url: "",
    description: "",
  });

  return (
    <div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-30 z-50">
      <form
        method="POST"
        action="/rental-property"
        class="bg-white p-6 rounded shadow-lg w-full max-w-md space-y-4"
      >
        <h3 class="text-xl font-bold mb-2">Add Rental Property</h3>
        <input
          name="properties"
          type="hidden"
          value={JSON.stringify(properties)}
        />
        <input
          name="title"
          placeholder="Title"
          required
          class="border p-2 rounded w-full"
          value={form.title}
          onInput={(e) => setForm({ ...form, title: e.currentTarget.value })}
        />
        <input
          name="address_1"
          placeholder="Address"
          required
          class="border p-2 rounded w-full"
          value={form.address_1}
          onInput={(e) =>
            setForm({ ...form, address_1: e.currentTarget.value })}
        />
        <input
          name="city"
          placeholder="City"
          required
          class="border p-2 rounded w-full"
          value={form.city}
          onInput={(e) => setForm({ ...form, city: e.currentTarget.value })}
        />
        <input
          name="state"
          placeholder="State"
          required
          class="border p-2 rounded w-full"
          value={form.state}
          onInput={(e) => setForm({ ...form, state: e.currentTarget.value })}
        />
        <input
          name="price"
          type="number"
          placeholder="Price"
          required
          class="border p-2 rounded w-full"
          value={form.price}
          onInput={(e) => setForm({ ...form, price: e.currentTarget.value })}
        />
        <input
          name="image_url"
          placeholder="Image URL"
          class="border p-2 rounded w-full"
          value={form.image_url}
          onInput={(e) =>
            setForm({ ...form, image_url: e.currentTarget.value })}
        />
        <textarea
          name="description"
          placeholder="Description"
          class="border p-2 rounded w-full"
          value={form.description}
          onInput={(e) =>
            setForm({ ...form, description: e.currentTarget.value })}
        />
        <div class="flex justify-end gap-2 mt-4">
          <button
            type="button"
            class="px-4 py-2 rounded border"
            onClick={onClose}
          >
            Cancel
          </button>
          <button
            type="submit"
            class="px-4 py-2 rounded bg-blue-600 text-white"
          >
            Create Rental
          </button>
        </div>
      </form>
    </div>
  );
}