import "../../components/main.js"
import getConfig from 'next/config'
import Layout from "../../components/main.js"
import { getGallery, getGalleryImages } from "../../data/external/cms.js"
import GalleryPager from "../../components/gallerypager.js"

export async function getServerSideProps(context) {

    const gallery = await getGallery(context.params.gallery)

    if(context.query.page == null || context.query.page == '0') {
        var page = 1;
    } else {
        var page = Number(context.query.page)
    }

    const galleryImages = await getGalleryImages(context.params.gallery, page, 9)

    const { serverRuntimeConfig } = getConfig()

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

    return {
        props: {pagedata, gallery: gallery.data[0], galleryImages, serverRuntimeConfig},
    }
}

const Gallery = ({pagedata, gallery, galleryImages, serverRuntimeConfig}) => {
    if (!gallery) return null
console.log(gallery)
    return(
        <Layout pagedata={pagedata}>
            <h1 className="page_title col-sm-12">{gallery.attributes.Title}</h1>
            <GalleryPager gallery={galleryImages} basepath={serverRuntimeConfig.media_path}></GalleryPager>
        </Layout>
    )
}

export default Gallery