import ReactPaginate from "react-paginate";
import { useRouter } from "next/router";
import Link from 'next/link'

const EpisodePager = ({ episodedata, config, showdata }) => {
    const router = useRouter()

    const handlePagination = page => {
        const path = router.pathname
        const query = router.query
        query.page = page.selected + 1
        router.push({
          pathname: path,
          query: query,
        })
      }

    return (
        <div className="episode_pages col-xs-12">
            <div className="show_episodes">
                {episodedata.episodes.map((episode) => (
                <div key={episode.slug} className="episode">
                    <div className="episode_title" id ={episode.episode_slug}>
                        <Link href={episode.show_slug + "/" + episode.episode_slug}>{episode.title}</Link>
                    </div>
                    <div className="content-date">
                        {episode.episode_published}
                    </div>
                    
                    <div className="episode_body" dangerouslySetInnerHTML={{ __html: episode.episode_lead}}></div>
                </div>
                ))}
            </div>
            <ReactPaginate
            marginPagesDisplayed={2}
            pageRangeDisplayed={5}
            previousLabel={"previous"}
            nextLabel={"next"}
            breakLabel={"..."}
            initialPage={episodedata.curPage - 1}
            pageCount={2}
            onPageChange={handlePagination}
        />
        </div>
    )
}
    
export default EpisodePager