import "../components/main"
import getConfig from 'next/config'
import Layout from "../components/main"
import StoryPager from "../components/storypager"
//import { popStoryPager } from "../data/external/cms"

async function popStoryPager(page) {
    
}

export async function getServerSideProps(context) {
    if(context.query.page == null || context.query.page == '0') {
        var page = 0;
    } else {
        var page = Number(context.query.page) - 1
    }

    const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
    const qs = require('qs')
    const query = qs.stringify({
        pagination: {
            page: page,
            pageSize: 5
        },
        sort: ['publishedAt:desc']
    }, {
        encodeValuesOnly: true,
    })
    console.log(query)
    const res = await fetch(serverRuntimeConfig.base_path + `articles?${query}`, {
        headers: new Headers({
          'Authorization': serverRuntimeConfig.strapi_token,
          'Content-Type': 'application/x-www-form-urlencoded'
        })
    })
    
    const artdata = await res.json()
    const articles = artdata

    const secres = await fetch(serverRuntimeConfig.base_path + `/api/sections`)
    const secdata = await secres.json()

    const pagedata = {'title': 'Angry Beanie News'}
    
    return {
        props: { articles, sections : secdata, pagedata }, // will be passed to the page component as props
    }
  }

function News({ articles, sections, pagedata }) {
    return <Layout sections={sections} pagedata={pagedata}>
        <h1>NEWS</h1>
        <StoryPager storydata={articles} />
    </Layout>
}

export default News