import React, { useRef, useState, useEffect, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { MagnifyingGlassIcon } from "@phosphor-icons/react";
import { Input } from "./Input";
import * as styles from "./styles";
import { getNeighborhoodURLFromSchema } from "~/utils/formatters/neighborhoodURLSchema";
import { useStateManagerContext } from "~/context/stateManager";
import { useNeighborhoodShowcase } from "~/sdks/NeighborhoodShowcase/context";
import { useNeighborhoods } from "~/sdks/NeighborhoodShowcase/hooks/useNeighborhoods";
import useDebounce from "~/hooks/useDebounce";
import { useOnEventOutside } from "~/hooks/useOnEventOutside";
export function Search() {
    var _a;
    const dropdownRef = useRef(null);
    const { t } = useTranslation("neighborhoodShowcase");
    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
    const [realTimeQuery, setRealTimeQuery] = useState("");
    const debouncedQuery = useDebounce(realTimeQuery, 500);
    const { myNeighborhoods, singleNeighborhoodURLSchema } = useNeighborhoodShowcase();
    const { sdkState } = useStateManagerContext();
    const urlSpacer = ((_a = sdkState.options) === null || _a === void 0 ? void 0 : _a.urlSchemaSpacer) || "-";
    const [allNeighborhoodsResults, setAllNeighborhoodsResults] = useState([]);
    const [featuredNeighborhoodsResults, setFeaturedNeighborhoodsResults] = useState([]);
    const { data: neighborhoodResults, isFetched, isLoading, } = useNeighborhoods({
        search: debouncedQuery,
    });
    const myNeighborhoodsGeogIds = useMemo(() => myNeighborhoods === null || myNeighborhoods === void 0 ? void 0 : myNeighborhoods.map((neighborhood) => neighborhood.geogId), [myNeighborhoods]);
    useEffect(() => {
        if (isFetched && !isLoading) {
            setAllNeighborhoodsResults((neighborhoodResults === null || neighborhoodResults === void 0 ? void 0 : neighborhoodResults.filter((neighborhood) => !(myNeighborhoodsGeogIds === null || myNeighborhoodsGeogIds === void 0 ? void 0 : myNeighborhoodsGeogIds.includes(neighborhood.geogId)))) || []);
            setFeaturedNeighborhoodsResults((neighborhoodResults === null || neighborhoodResults === void 0 ? void 0 : neighborhoodResults.filter((neighborhood) => myNeighborhoodsGeogIds === null || myNeighborhoodsGeogIds === void 0 ? void 0 : myNeighborhoodsGeogIds.includes(neighborhood.geogId))) || []);
            setIsDropdownOpen((neighborhoodResults === null || neighborhoodResults === void 0 ? void 0 : neighborhoodResults.length) > 0);
        }
    }, [neighborhoodResults, isFetched, isLoading]);
    useOnEventOutside(dropdownRef, "click", () => {
        setIsDropdownOpen(false);
        setRealTimeQuery("");
    });
    const handleSearchChange = (e) => {
        setRealTimeQuery(e.target.value);
    };
    return (React.createElement("div", { className: styles.container, ref: dropdownRef },
        React.createElement(Input, { name: "searchNeighborhoods", prefixIcon: MagnifyingGlassIcon, label: t("header.search.placeholder"), value: realTimeQuery, onChange: handleSearchChange }),
        isDropdownOpen && (React.createElement("div", { className: styles.results },
            React.createElement("ul", { className: styles.list },
                (allNeighborhoodsResults === null || allNeighborhoodsResults === void 0 ? void 0 : allNeighborhoodsResults.length) > 0 && (React.createElement("li", { className: styles.item, "data-is-title": true }, t("header.search.results.all"))), allNeighborhoodsResults === null || allNeighborhoodsResults === void 0 ? void 0 :
                allNeighborhoodsResults.map((neighborhood) => (React.createElement("li", { key: neighborhood.geogId, className: styles.item },
                    React.createElement("a", { className: styles.itemLink, href: singleNeighborhoodURLSchema &&
                            getNeighborhoodURLFromSchema(singleNeighborhoodURLSchema, neighborhood, urlSpacer), target: "_parent", rel: "noreferrer" }, neighborhood.name)))),
                (featuredNeighborhoodsResults === null || featuredNeighborhoodsResults === void 0 ? void 0 : featuredNeighborhoodsResults.length) > 0 && (React.createElement("li", { className: styles.item, "data-is-title": true }, t("header.search.results.featured"))), featuredNeighborhoodsResults === null || featuredNeighborhoodsResults === void 0 ? void 0 :
                featuredNeighborhoodsResults.map((neighborhood) => (React.createElement("li", { key: neighborhood.geogId, className: styles.item },
                    React.createElement("a", { className: styles.itemLink, href: singleNeighborhoodURLSchema &&
                            getNeighborhoodURLFromSchema(singleNeighborhoodURLSchema, neighborhood, urlSpacer), target: "_parent", rel: "noreferrer" }, neighborhood.name)))))))));
}
//# sourceMappingURL=index.js.map