import { graphql, useStaticQuery } from "gatsby"
import React from "react"
import { twMerge } from "tailwind-merge"

interface Props {
    children?: React.ReactNode
    className?: string
    icon?: JSX.Element
    title?: string
    iconColor?: string
    valueColor?: string
    descriptionColor?: string
    options: any
}

const Stats = (props: Props) => {
    const getStats = useStaticQuery(graphql`
        query getStats {
            directus {
                counts(filter: { status: { _eq: "published" } }, sort: "sort") {
                    id
                    name
                    value
                    description
                    sort
                }
            }
        }
    `)

    const stats = getStats.directus.counts

    const {
        children,
        className = "",
        iconColor,
        valueColor,
        descriptionColor,
        icon,
        title = "Données disponibles sur la plateforme",
    } = props

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

    return (
        <div className={twMerge("mx-auto py-24", oClass.main)}>
            <h3
                className={twMerge(
                    "mt-3 text-xl",
                    oClass.title,
                    oClass.titleStats // Deprecated
                )}
            >
                {title}
            </h3>
            <div
                className={twMerge(
                    "stats my-3 shadow",
                    className,
                    oClass.stats
                )}
            >
                {stats.map((stat: any) => (
                    <div
                        key={stat.id}
                        className={twMerge(
                            "stat w-64 place-items-center",
                            oClass.stat,
                            oClass.containtStats // Deprecated
                        )}
                    >
                        {icon ? (
                            <div
                                className={twMerge(
                                    "stat-figure",
                                    iconColor,
                                    oClass.icon
                                )}
                            >
                                {icon}
                            </div>
                        ) : (
                            <></>
                        )}
                        <div className={twMerge("stat-title", oClass.name)}>
                            {stat.name}
                        </div>
                        <div
                            className={twMerge(
                                "stat-value",
                                valueColor,
                                oClass.value
                            )}
                        >
                            {stat.value}
                        </div>
                        {stat.description ? (
                            <div
                                className={twMerge(
                                    "stat-description",
                                    descriptionColor,
                                    oClass.description
                                )}
                            >
                                {stat.description}
                            </div>
                        ) : (
                            <></>
                        )}
                        {children ? (
                            <div
                                className={twMerge(
                                    "stat-actions",
                                    oClass.children,
                                    oClass.action
                                )}
                            >
                                {children}
                            </div>
                        ) : (
                            <></>
                        )}
                    </div>
                ))}
            </div>
        </div>
    )
}

export default Stats