import React from "react"

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

import { Content, Button } from "@onegeo-suite/gatsby-theme-onegeo"
import Component from "./section/component"

interface ISection {
    id: string
}

const GRAPHQL_QUERY = graphql`
    query getSections {
        directus {
            sections(filter: { status: { _eq: "published" } }) {
                id
                title
                subtitle
                content
                background
                size
                options
                actions {
                    actions_id {
                        name
                        url
                        style
                        id
                        options
                    }
                }
                components {
                    components_id(filter: { status: { _eq: "published" } }) {
                        id
                        title
                        subtitle
                        content
                        url_dataviz
                        url_map
                        type
                        mapdid
                        layout
                        length
                        size
                        options
                        actions {
                            actions_id {
                                name
                                url
                                style
                                color
                                id
                                options
                            }
                        }
                        services {
                            services_id(
                                filter: { status: { _eq: "published" } }
                            ) {
                                name
                                url
                                description
                                id
                                image {
                                    imageFile {
                                        publicURL
                                    }
                                    id
                                }
                                options
                            }
                        }
                        images {
                            directus_files_id {
                                imageFile {
                                    childImageSharp {
                                        gatsbyImageData
                                    }
                                    name
                                    publicURL
                                }
                                id
                            }
                        }
                    }
                }
            }
        }
    }
`

const sectionColumns = {
    1: "lg:grid-cols-1",
    2: "lg:grid-cols-2",
    3: "lg:grid-cols-3",
}
const sectionSize = {
    full: "max-w-full",
    xl: "max-w-7xl",
    lg: "max-w-4xl",
}

const Section = (props: ISection) => {
    const { id } = props

    const data = useStaticQuery(GRAPHQL_QUERY)

    const section = data.directus.sections.find((section) => section.id === id)
    if (!section) return null

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

    // Need style for custom color / classname at runtime
    const ContentStyle = section.background
        ? { backgroundColor: section.background }
        : undefined

    return (
        <Content
            className={twMerge("mb-10", sectionSize[section.size], oClass.main)}
            style={ContentStyle}
        >
            {section.title && (
                <h2
                    className={twMerge("text-3xl font-extrabold", oClass.title)}
                >
                    {section.title}
                </h2>
            )}
            {section.subtitle && (
                <h4
                    className={twMerge(
                        "mt-2 text-2xl font-bold",
                        oClass.subtitle
                    )}
                >
                    {section.subtitle}
                </h4>
            )}
            {section.content && (
                <div
                    className={twMerge(
                        "py-4 text-justify text-lg leading-8",
                        oClass.content
                    )}
                    dangerouslySetInnerHTML={{ __html: section.content }}
                ></div>
            )}
            {section.components.length > 0 && (
                <div
                    className={twMerge(
                        "grid grid-cols-1 gap-4",
                        sectionColumns[section.components.length],
                        oClass.components
                    )}
                >
                    {section.components.map((component) => {
                        const dtComponent = component.components_id
                        if (!dtComponent) return null

                        return (
                            <React.Fragment key={dtComponent.id}>
                                <Component {...dtComponent} />
                            </React.Fragment>
                        )
                    })}
                </div>
            )}
            {section.actions.length > 0 ? (
                <div className="mt-4 flex space-x-4">
                    {section.actions.map((actionId) => {
                        const action = actionId.actions_id

                        return <Button key={action.id} {...action} />
                    })}
                </div>
            ) : null}
        </Content>
    )
}

export default Section