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

import {
    CardList,
    Button,
    TitleComponent,
    merge,
} from "@onegeo-suite/gatsby-theme-onegeo"

// Ineherit type from cardlist ?
interface INews {
    title?: string
    action?: {
        name?: string
        url?: string
        classname?: string
    }
    anime?: boolean
    layout?: "row" | "col" | "grid"
    size?: "xs" | "base" | "xl"
    options?: any
}

const News = (props: INews) => {
    const data = useStaticQuery(graphql`
        query getNews {
            directus {
                news(
                    limit: 3
                    filter: { status: { _eq: "published" } }
                    sort: ["-pinned", "-date_published"]
                ) {
                    id
                    slug
                    content
                    abstract
                    title
                    date_published
                    image {
                        id
                        imageFile {
                            childImageSharp {
                                gatsbyImageData
                            }
                            name
                            publicURL
                        }
                    }
                }
            }
        }
    `)
    /*
    options = {
        card: {},
        cards: {},
        action: {},
        actions: {},
        class: {
            main: {},
            title: {},
            actions: {},
        },
    },
    */
    const { title = "", anime, action, size = "xs", layout = "grid" } = props
    const options = props.options ?? {}
    const oClass = options.class || {}

    const news = data.directus.news.map((dtNew) => {
        return {
            name: dtNew.title,
            description: dtNew.abstract || dtNew.content,
            image: dtNew.image?.imageFile,
            url: "/news/" + dtNew.slug,
            size: size,
            anime: anime || options.anime,
            options: options.card,
            layout: options.card.layout,
        }
    })

    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={news} layout={layout} {...options.cards} />
            <div
                className={twMerge("my-8 flex justify-center", oClass.actions)}
            >
                {action && <Button {...action} {...options.action} />}
            </div>
        </div>
    )
}

export default News