import React from "react"
import { graphql, PageProps } from "gatsby"
import { Layout, Content, Sections } from "@onegeo/gatsby-theme-onegeo"
import { Toc } from "@onegeo/gatsby-theme-onegeo";

interface ISection {
    sections_id: string[] | []
}
interface IPageContext {
    directus: {
        pages: {
            id: string
            title: string
            content: string
            slug: string
            sections: ISection[] | []
            toc: boolean
        }
    }
}

const PageTemplate = ({ data }: PageProps<IPageContext>) => {

    const news = data.directus.pages[0]
    const { title, content, sections, toc = false} = news

    const idsSections = sections.map((section: any) => section.sections_id.id)

    return (
        <Layout>
            {
                (toc) ? <Toc className="hidden md:block top-14" /> : <></>
            }
            <Content className={`${toc ? "mx-0 md:mr-72 md:ml-2" : "mx-auto" } `}>
                {title && <h1 className="text-3xl font-extrabold">{title}</h1>}
                {content && (
                    <div
                        className="text-lg leading-8 py-4 text-justify"
                        dangerouslySetInnerHTML={{ __html: content }}
                    ></div>
                )}
                {Object.keys(idsSections).length !== 0 && (
                    <Sections ids={idsSections} />
                )}
            </Content>
        </Layout>
    )
}

export default PageTemplate

export const query = graphql`
    query ($id: DirectusData_GraphQLStringOrFloat!) {
        directus {
            pages(filter: { id: { _eq: $id } }) {
                sections {
                    sections_id {
                        id
                    }
                }
                content
                id
                title
                slug
                toc
            }
        }
    }
`