import "../components/main.js"
import Layout from "../components/main.js"
import Link from 'next/link'
import getConfig from 'next/config'
import Image from 'next/image';

export async function getServerSideProps(context) {
    const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
    const secres = await fetch(serverRuntimeConfig.base_path + `/api/sections`)
    const secdata = await secres.json()

    const currpodcastres = await fetch(serverRuntimeConfig.base_path + `podcast-series?filters[status][$eq]=true`, {
        headers: new Headers({
          'Authorization': serverRuntimeConfig.strapi_token,
          'Content-Type': 'application/x-www-form-urlencoded'
        })
    })
    const currpodcastdata = await currpodcastres.json()
    const currpodcastlist = currpodcastdata.data

    console.log(currpodcastlist)

    const archpodcastres = await fetch(serverRuntimeConfig.base_path + `podcast-series?filters[status][$eq]=false`, {
        headers: new Headers({
          'Authorization': serverRuntimeConfig.strapi_token,
          'Content-Type': 'application/x-www-form-urlencoded'
        })
    })
    const archpodcastdata = await archpodcastres.json()
    const archpodcastlist = archpodcastdata.data

    const episodedata = "hi there"

    const pagedata = {'title': 'Angry Beanie - Current Podcast Projects'}

    return {
        props: { sections : secdata, currpodcastlist, archpodcastlist, episodedata, pagedata, serverRuntimeConfig }, // will be passed to the page component as props
    }
}

const Podcasts = ({sections, currpodcastlist, archpodcastlist, episodedata, pagedata, serverRuntimeConfig}) =>  (
    <Layout sections={sections} episodedata={episodedata} pagedata={pagedata} serverRuntimeConfig>
        <h1>Podcasts</h1>
        <div className="page_body">Over the years I have made a number of podcasts.</div>
        <div className="row">
        <div className="col-sm-6">
            <h2>Current Podcasts</h2>
            {currpodcastlist.map((podcast) => (
            <div>
                {/* <Image
                src={serverRuntimeConfig.base_path + "/" + podcast.logo.src}
                height={podcast.logo.height}
                width={podcast.logo.width}
                ></Image> */}
                <Link href={"/podcasts/shows/" + podcast.attributes.Slug}>{podcast.attributes.Title}</Link></div>
            ))}
        </div>
        <div className="col-sm-6">
            <h2>Archived Podcasts</h2>
            {archpodcastlist.map((podcast) => (
            <div>
                {/* <Image
                src={serverRuntimeConfig.base_path + "/" + podcast.logo.src}
                height={podcast.logo.height}
                width={podcast.logo.width}
                ></Image> */}
                <Link href={"/podcasts/shows/" + podcast.Slug}>{podcast.Title}</Link></div>
            ))}
        </div>
        </div>
    </Layout>
)

export default Podcasts