import React, { useEffect, useState } from "react"

import CardList from "./core/CardList"

import { MAPS_URL } from "../constant"

interface IMaps {
    layout?: "row" | "col" | "grid"
    size?: "xs" | "base" | "xl"
    limit?: number
    options?: object
}

const Maps = (props: IMaps) => {
    const { title, layout = "row", size = "xs", limit = 3 } = props
    const options = props.options ?? {}
    const [data, setData] = useState([])

    useEffect(() => {
        fetch(`${MAPS_URL}&start=0&limit=${limit}`)
            .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) => {
        return {
            name: data.name,
            description: data.description,
            image: `/geoportal/${data.thumbnail}`,
            size: size,
            url: `/geoportal/#/context/Admin/${data.id}`,
        }
    })

    return (
        <div data-theme={options.theme}>
            <h2 className="mb-8 p-2 text-2xl font-extrabold tracking-tight sm:text-3xl">
                {title}
            </h2>
            <CardList cards={dataCards} layout={layout} />
        </div>
    )
}

export default Maps