import React, { useState, useEffect } from "react" import { twMerge } from "tailwind-merge" import { Combobox, Transition } from "@headlessui/react" import { SearchIcon } from "@heroicons/react/outline" import { cleanHtml, isBrowser } from "@onegeo-suite/gatsby-theme-onegeo" interface Props { options?: any position?: "left" | "right" placeholder?: string noResult?: string category?: string } const EXPLORER_PATH = process.env.OGS_EXPLORER_PATH || "/explorer" const Search = (props: Props) => { const { position = "left", placeholder = "Recherche...", noResult = "Aucun résultat", category = "", } = props const options = props.options ?? {} const oClass = options.class || {} // @ts-ignore const [query, setQuery] = useState("") const [items, setItems] = useState([]) // Get Mapstore context useEffect(() => { fetch("/fr/indexer/elastic/search/autocomplete/?q=" + query) .then((response) => response.json()) .then((data) => { console.log(data) setItems(data.results) }) .catch((error) => { console.log(error) }) }, [query]) return ( <div className={twMerge("", oClass.main)}> <Combobox as="div" value={null} onChange={(item) => { if (!item) return if (item === "") return if (!isBrowser) return setItems([]) setQuery("") const params = new URLSearchParams({ q: cleanHtml(item), }) if (category && category !== "") params.append("category", category) const url = EXPLORER_PATH + "/fr/recherche?" + params.toString() window.open(url, "_blank") }} className={twMerge( "bg-base-100 ring-base-content mx-auto max-w-xl divide-y divide-gray-100 overflow-hidden ring-1 ring-opacity-10", oClass.combobox )} nullable > <div className={twMerge("relative", oClass.body)}> {position == "left" && ( <SearchIcon className={twMerge( "text-base-content pointer-events-none absolute left-4 top-3.5 h-5 w-5", oClass.icon )} aria-hidden="true" /> )} <Combobox.Input className={twMerge( "placeholder:text-base-content text-base-content h-12 w-full border-0 bg-transparent pl-11 pr-4 text-sm focus:ring-0 md:text-base", oClass.input )} placeholder={placeholder} onChange={(event) => setQuery(event.target.value)} /> {position == "right" && ( <SearchIcon className={twMerge( "text-base-content pointer-events-none absolute right-4 top-3.5 h-5 w-5", oClass.icon )} aria-hidden="true" /> )} </div> <Transition enter="transition duration-100 ease-out" enterFrom="transform scale-95 opacity-0" enterTo="transform scale-100 opacity-100" leave="transition duration-75 ease-out" leaveFrom="transform scale-100 opacity-100" leaveTo="transform scale-95 opacity-0" > <Combobox.Options className={twMerge( "text-base-content scrollbar-thin scrollbar-track-base-200 scrollbar-thumb-base-300 bg-base-100 max-h-72 overflow-y-auto py-2 text-sm", oClass.options )} > {items.length === 0 && query !== "" ? ( <div className={twMerge( "text-base-content p-4 text-sm", oClass.noresult )} > {noResult} </div> ) : ( items.map((item, idx) => ( <Combobox.Option key={idx} value={item} className={({ active }) => twMerge( "cursor-default select-none truncate px-4 py-2", active && "bg-primary text-primary-content", oClass.option ) } > <span dangerouslySetInnerHTML={{ __html: item, }} /> </Combobox.Option> )) )} </Combobox.Options> </Transition> </Combobox> </div> ) } export default Search