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

interface IMaps {
    anime?: boolean
    layout?: "row" | "col" | "grid"
    size?: "xs" | "base" | "xl"
    limit?: number
    title?: string
    action?: {
        name?: string
        url?: string
        classname?: string
    }
    options?: object
    format?: "mapstore" | "maps"
}

const Maps = (props: IMaps) => {
    const {
        title,
        action,
        anime,
        layout = "row",
        size = "xs",
        limit = 3,
        format = "maps",
    } = props

    const options = props.options ?? {}
    const oClass = options.class || {}

    const [data, setData] = useState([])

    const mapsUrl = getMapsUrl(format, limit)

    useEffect(() => {
        fetch(mapsUrl)
            .then((res) => {
                if (!res.ok) {
                    throw new Error(res.statusText)
                }

                return res.json()
            })
            .then((response) => {
                const results = response.results
                if (results.length) {
                    setData(results)
                }
            })
            .catch((e) => {
                console.log(e)
            })
    }, [])

    if (!data.length) return null

    const dataCards = data.map((data: any) => {
        let oData = getDataCardsByFormat(data, format)

        return {
            size: size,
            anime: anime || options.anime,
            options: options.card,
            ...oData,
        }
    })

    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>
    )
}

const isFormatMaps = (format: string) => {
    return format == "maps"
}

const getMapsUrl = (format: string, limit: number) => {
    let url

    if (isFormatMaps(format)) {
        url = `/fr/maps/maps/?format=json&q=&highlight=true&page=1&page_size=${limit}`
    } else {
        url = `/geoportal/rest/geostore/extjs/search/category/MAP/***/thumbnail,details,featured?includeAttributes=true&start=0&limit=${limit}`
    }

    return url
}

const getDataCardsByFormat = (data: any, format: string) => {
    let oData

    if (isFormatMaps(format)) {
        oData = {
            name: data.display_name,
            description: data.description,
            image: data.thumbnail.url,
            url: `/maps/#/map/${data.id}`,
        }
    } else {
        oData = {
            name: data.name,
            description: data.description,
            image: `/geoportal/${data.thumbnail}`,
            url: `/geoportal/#/context/Admin/${data.id}`,
        }
    }

    return oData
}

export default Maps