import getConfig from 'next/config'
import "../../components/main.js"
import Layout from "../../components/main.js"
import FeatureImage from "../../components/featureimage.js"
import StorySideBar from '../../components/storysidebar.js'
import * as gtag from "../../lib/gtag"
import Image from 'next/image';

export async function getServerSideProps(context) {
    const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
    const slug = context.params.slug
    const url = serverRuntimeConfig.base_path + '/api/document/' + slug
 
    const res = await fetch(url)
    const article_obj = await res.json()

    const stories = await fetch(serverRuntimeConfig.base_path + `/api/documents/0/5`)
    const storydata = await stories.json()

    const pagedata = {
        'title': "Angry Beanie - " + article_obj.title
    }

    const secres = await fetch(serverRuntimeConfig.base_path + '/api/sections')
    const secdata = await secres.json()
    
    return {
        props: { article_obj, sections: secdata, pagedata, storydata, serverRuntimeConfig}, // will be passed to the page component as props
    }
}

const Article = ({article_obj, sections, pagedata, storydata, serverRuntimeConfig}) => (
    <Layout sections={sections} pagedata={pagedata}>
        <div className="main_content col-md-9 col-sm-12">
            <FeatureImage imagedata = {article_obj.image} basepath = {serverRuntimeConfig.base_path} ></FeatureImage>
            <h1>{article_obj.title}</h1>
            <div className="article_body" dangerouslySetInnerHTML={{ __html: article_obj.body }}></div>
        </div>
        <StorySideBar stories={storydata} />
    </Layout>
)

export default Article