// components/forms/SearchForm.js
import { useSearch } from "../../context/search";
import GooglePlacesAutocomplete from "react-google-places-autocomplete";
import { GOOGLE_PLACES_KEY } from "../../config";
import { housePrices, rentPrices } from "../../helpers/priceList";

export default function SearchForm() {
  const [search, setSearch] = useSearch();

  return (
    <>
      <div className="container mt-5 mb-5">
        <div className="row">
          <div className="col-lg-12">
            <GooglePlacesAutocomplete
              apiKey={GOOGLE_PLACES_KEY}
              apiOptions={{ region: "au" }}
              selectProps={{
                defaultInputValue: search?.address,
                placeholder: "Search for address..",
                onChange: ({ value }) => {
                  setSearch({ ...search, address: value.description });
                },
              }}
            />
          </div>
        </div>

        <div className="d-flex justify-content-center">
          <button className="col-lg-2 btn btn-primary">Buy</button>
          <button className="col-lg-2 btn btn-primary">Rent</button>
          <button className="col-lg-2 btn btn-primary">House</button>
          <button className="col-lg-2 btn btn-primary">Land</button>

          <div className="dropdown">
            <button
              className="btn btn-primary dropdown-toggle"
              type="button"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              &nbsp; Price range
            </button>
            <ul className="dropdown-menu">
              {search.action === "Buy" ? (
                <>
                  {housePrices?.map((p) => (
                    <li key={p._id}>
                      <a
                        className="dropdown-item"
                        onClick={() =>
                          setSearch({
                            ...search,
                            price: p.name,
                            priceRange: p.array,
                          })
                        }
                      >
                        {p.name}
                      </a>
                    </li>
                  ))}
                </>
              ) : (
                <>
                  {rentPrices?.map((p) => (
                    <li key={p._id}>
                      <a
                        className="dropdown-item"
                        onClick={() =>
                          setSearch({
                            ...search,
                            price: p.name,
                            priceRange: p.array,
                          })
                        }
                      >
                        {p.name}
                      </a>
                    </li>
                  ))}
                </>
              )}
            </ul>
          </div>

          <button className="col-lg-2 btn btn-danger">Search</button>
        </div>
      </div>

      {JSON.stringify(search, null, 4)}
    </>
  );
}