import { useRouter } from 'next/router'
import getConfig from 'next/config'
import Layout from "../../../components/main.js"
import * as gtag from "../../../lib/gtag"
import AudioPlayer from "react-h5-audio-player";
import 'react-h5-audio-player/lib/styles.css';
import EpisodeSideBar from "../../../components/episodesidebar"


export async function getServerSideProps(context) {
    const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
    const slug = context.params.episode

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

    const epres = await fetch(serverRuntimeConfig.base_path + 'podcast-episodes?filters[Slug][$eq]='+slug[1]+'&populate=*', {
        headers: new Headers({
          'Authorization': 'Bearer 77df3f9be0a33ee3e91e4314e99fe649348fe15e66348fa53cc335e936345661bea7eb3c826475bc8605037d9753e334061f579aa864a5c5a7436dc3b6853ee4712c822b462156d445cebe08b3e298967829ceccb4c4aa7c61c674527ddf66514a9879b36b15732fc4f505945fbe9e23e65c0525fce834b3858936ab2ab671b7',
          'Content-Type': 'application/x-www-form-urlencoded'
        })
    })
    const epdata = await epres.json()
    const episode = epdata.data[0]
    console.log(epdata.data[0].attributes.Audio.data.attributes)

    const sepres = await fetch(serverRuntimeConfig.base_path + 'podcast-episodes?filters[podcast_sery][slug][$eq]='+slug[0], {
        headers: new Headers({
          'Authorization': 'Bearer 77df3f9be0a33ee3e91e4314e99fe649348fe15e66348fa53cc335e936345661bea7eb3c826475bc8605037d9753e334061f579aa864a5c5a7436dc3b6853ee4712c822b462156d445cebe08b3e298967829ceccb4c4aa7c61c674527ddf66514a9879b36b15732fc4f505945fbe9e23e65c0525fce834b3858936ab2ab671b7',
          'Content-Type': 'application/x-www-form-urlencoded'
        })
    })
    const sepdata = await sepres.json()
    const sepisodes = sepdata.data

    const audiodata = {
        audio_path: serverRuntimeConfig.audio_path,
        audio_mp3:  epdata.data[0].attributes.Audio.data.attributes
    }

    const pagedata = {
        'title': 'Angry Beanie - ' + episode.attributes.Title
    }

    return {
        props: { pagedata, sections: secdata, episode, audiodata, sepisodes }
    }
}

const Episode = ( props ) => {
    return (<Layout 
                pagedata={props.pagedata} 
                sections={props.sections} 
                episode={props.episode} 
                audiodata={props.audiodata}
                sepdata={props.sepisodes}>
        <h1>{props.episode.attributes.Title}</h1>
        <div className="main_content col-md-9 col-sm-12">
            <AudioPlayer
                src={props.audiodata.audio_path + props.audiodata.audio_mp3.url}
                onPlay={e => gtag.event({action: "play", category:"audio", label: "audio started", value: props.audiodata.audio_mp3})}
                onPause={e => gtag.event({action: "pause", category:"audio", label: "audio paused", value: props.audiodata.audio_mp3})}
                onEnded={e => gtag.event({action: "end", category:"audio", label: "audio ended", value: props.audiodata.audio_mp3})}
                />
            <div className="article_body" dangerouslySetInnerHTML={{ __html: props.episode.episode_body}} />
        </div>
        {/* <EpisodeSideBar epdata={props.sepisodes}></EpisodeSideBar> */}
    </Layout>)
}

export default Episode