import React, { useState, useEffect } from "react"
import CardList from "./core/CardList"
import TitleComponent from "./core/TitleComponent"
import { twMerge } from "tailwind-merge"
import { Button } from "@onegeo-suite/gatsby-theme-onegeo"

interface Idata {
    anime?: boolean
    layout?: "row" | "col" | "grid"
    size?: "xs" | "base" | "xl"
    title?: string
    action?: {
        name?: string
        url?: string
        classname?: string
    }
    options?: any
}

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

const Data = (props: Idata) => {
    const { title, action, anime, layout = "row", size = "xs" } = props
    const options = props.options ?? {}
    const oClass = options.class || {}

    const [data, setData] = useState<any[]>([])

    useEffect(() => {
        fetch("/fr/indexer/elastic/_search/?request_cache=true", {
            method: "POST",
            headers: new Headers({
                "Content-Type": "application/json; charset=UTF-8",
            }),
            body: JSON.stringify({
                from: 0,
                size: 3,
                collapse: {
                    field: "uuid.keyword",
                },
                sort: [
                    {
                        "metadata-fr.publicationDate": {
                            order: "asc",
                            unmapped_type: "date",
                        },
                    },
                ],
                _source: {
                    include: [
                        "slug",
                        "_dataset.display_name",
                        "_dataset.description",
                        "_dataset.thumbnail",
                        "_dataset.publication_date",
                    ],
                },
            }),
        })
            .then((res) => {
                if (!res.ok) {
                    throw new Error(res.statusText)
                }
                return res.json()
            })
            .then((response) => {
                const hits = response?.hits?.hits
                if (hits.length) {
                    setData(hits)
                }
            })
            .catch((e) => {
                console.log(e)
            })
    }, [])

    if (!data.length) return null

    const dataCards = data.map((item: any) => {
        const md = item?._source?._dataset
        const url = item?._source?.slug
        if (!md) return null
        return {
            name: md.display_name,
            description: md.description,
            image: md.thumbnail,
            url: `${EXPLORER_PATH}/fr/jeux-de-donnees/${url}`,
            size: size,
            // url: `/geoportal/#/context/Admin/${item.id}`,
            anime: anime || options.anime,
            options: options.card,
        }
    })
    return (
        <div data-theme={options.theme} className={twMerge(oClass.main)}>
            <TitleComponent
                title={title}
                className="mb-6 p-2 text-2xl font-extrabold tracking-tight sm:text-3xl"
                options={options}
            />
            <CardList cards={dataCards} layout={layout} {...options.cards} />
            <div
                className={twMerge("my-8 flex justify-center", oClass.actions)}
            >
                {action && <Button {...action} {...options.action} />}
            </div>
        </div>
    )
}

export default Data