Section.tsx

import React from "react"

import { useStaticQuery, graphql } from "gatsby"

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

interface ISection {
    id: string
}

const GRAPHQL_QUERY = graphql`
    query getSections {
        directus {
            sections {
                id
                title
                subtitle
                content
                background
                size
                actions {
                    actions_id {
                        name
                        url
                        style
                        id
                    }
                }
                components {
                    components_id {
                        id
                        title
                        subtitle
                        content
                        url_dataviz
                        url_map
                        type
                        mapdid
                        layout
                        length
                        size
                        options
                        actions {
                            actions_id {
                                name
                                url
                                style
                                color
                                id
                            }
                        }
                        services {
                            services_id {
                                name
                                url
                                description
                                id
                                image {
                                    imageFile {
                                        publicURL
                                    }
                                    id
                                }
                            }
                        }
                        images {
                            directus_files_id {
                                imageFile {
                                    childImageSharp {
                                        gatsbyImageData
                                    }
                                }
                                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

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

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

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

export default Section