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