Search.tsx

import React, { useState, useEffect } from "react"
import { twMerge } from "tailwind-merge"

import { Combobox } from "@headlessui/react"
import { SearchIcon } from "@heroicons/react/outline"
import { navigate } from "gatsby"

import { cleanHtml, isBrowser } from "@onegeo-suite/gatsby-theme-onegeo"
interface Props {
    options?: any
    position?: "left" | "right"
    placeholder?: string
}

const EXPLORER_PATH = process.env.OGS_EXPLORER_PATH || "/explorer"

const Search = (props: Props) => {
    const { position = "left", placeholder = "Recherche..." } = 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)}>
            <div
                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
                )}
            >
                <Combobox
                    value={null}
                    onChange={(item) => {
                        if (!item) return
                        if (item === "") return
                        if (!isBrowser) return

                        setItems([])
                        setQuery("")

                        const url =
                            EXPLORER_PATH + "/fr/recherche?q=" + cleanHtml(item)

                        window.location = url
                    }}
                    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>

                    {items.length > 0 && (
                        <Combobox.Options
                            static
                            className={twMerge(
                                "text-base-content scrollbar-thin scrollbar-track-base-200 scrollbar-thumb-base-300 max-h-72 overflow-y-auto py-2 text-sm",
                                oClass.options
                            )}
                        >
                            {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>
                    )}

                    {query !== "" && items.length === 0 && (
                        <p
                            className={twMerge(
                                "text-base-content p-4 text-sm",
                                oClass.noresult
                            )}
                        >
                            Aucun résultat.
                        </p>
                    )}
                </Combobox>
            </div>
        </div>
    )
}

export default Search