//WORDPRESS
//import { Fade, Slide } from 'react-awesome-reveal'
import Container from 'components/BlogContainer'
import Layout from 'components/Layout'
//import axios from "axios"
import type { Settings } from 'lib/sanity.queries'
import { getPage, getPaginationStatic } from 'lib/wordpress.data'
import Image from 'next/image'
import Link from 'next/link'
import uniqid from 'uniqid'
import { NextSeo } from 'next-seo'
import { format, parseISO } from 'date-fns'
import { IoCalendarOutline, IoNewspaperOutline } from 'react-icons/io5'
import { GetServerSideProps } from 'next'

import { getImageLink } from '../../../lib/wordpress.image'
import { Latestpost } from '../../../lib/wordpress.queries'

export interface NewsRoomPageProps {
  preview?: boolean
  newsroomposts: Latestpost[]
  loading?: boolean
  settings: Settings
}

const NO_POSTS: Latestpost[] = []
const url = 'https://cmswp.gwkbali.com/wp-json/wp/v2/monthly-release/'

export default function page(props) {
  const {
    loading,
    newsroomposts,
    newsroompost,
    settings,
    preview,
    paginations,
  } = props

  return (
    <>
      <NextSeo
        title="Monthly Update - GWK Cultural Park"
        description="News and Articles from Garuda Wisnu Kencana Cultural Park"
        additionalLinkTags={[
          {
            rel: 'icon',
            href: '../../favicon/favicon.ico',
          },
        ]}
        openGraph={{
          type: 'website',
          url: 'https://www.gwkbali.com/monthly-release/page/1',
          title: 'Monthly Update - GWK Cultural Park',
          description:
            'News and Articles from Garuda Wisnu Kencana Cultural Park',
          images: [
            {
              url: 'https://cdn.sanity.io/images/helyis1v/production/8012e4065dff5de751920ed43307eb4245ed76d4-1024x683.jpg',
              width: 800,
              height: 600,
              alt: 'News and Articles from Garuda Wisnu Kencana Cultural Park',
            },
            {
              url: 'https://cdn.sanity.io/images/helyis1v/production/8012e4065dff5de751920ed43307eb4245ed76d4-1024x683.jpg',
              width: 800,
              height: 600,
              alt: 'News and Articles from Garuda Wisnu Kencana Cultural Park',
            },
          ],
        }}
      />
      <Layout loading={loading} preview={preview}>
        <div className="bg-stone-100">
          <div className="p-5">
            <Container>
              <h1 className="animate-fade-up text-4xl font-bold leading-tight tracking-tight animate-duration-[1200ms] animate-once sm:text-6xl md:text-6xl">
                Monthly Update 
              </h1>
              <h2>
                <span className="inline-flex animate-fade items-center font-sans text-sm text-stone-400 animate-delay-300 animate-duration-[1200ms] animate-once sm:text-base">
                  <IoNewspaperOutline />
                  &nbsp;News and Articles
                </span>
              </h2>
              {/* <p className="text-stone-400 animate-fade font-sans text-base animate-delay-300 animate-duration-[1200ms] animate-once ">
                A regularly published articles about Garuda Wisnu Kencana Statue
              </p> */}
            </Container>
          </div>
        </div>

        {/* <Container> */}
        <div className="mt-0 pl-0 pr-0 sm:py-10 sm:pl-24 sm:pr-24">
          <>
            {newsroomposts.slice(0, 9).map((newsroompost) => {
              return (
                <div key={newsroompost.id} className="mb-10">
                  <div className="grid w-full grid-cols-1 gap-4 sm:grid sm:grid-cols-2 sm:gap-4 sm:pb-5">
                    <Link href={`/monthly-release/${newsroompost.slug}`}>
                      <div className="sm:mr-10">
                        <Image
                          alt={newsroompost.title.rendered}
                          src={getImageLink(
                            newsroompost._embedded['wp:featuredmedia'],
                            newsroompost.featured_media
                          )}
                          className="aspect-[3/2] rounded-none shadow-inner sm:rounded-md"
                          width={600}
                          height={400}
                          object-fit="cover"
                        />
                      </div>
                    </Link>

                    <div>
                      <div className="pb-5 pl-7 pr-7 pt-5 sm:pb-5 sm:pl-0 sm:pr-10 sm:pt-0">
                        <div>
                          <Link href={`/monthly-release/${newsroompost.slug}`}>
                            <h3
                              className="animate-delay-600 text-slate-900 animate-fade pb-3 text-3xl font-semibold leading-tight duration-300 ease-in animate-duration-[600ms] animate-once hover:text-yellow-600 sm:text-4xl"
                              dangerouslySetInnerHTML={{
                                __html: newsroompost.title.rendered,
                              }}
                            ></h3>
                          </Link>
                        </div>
                        <div className="text-stone-500 font-sans text-xs">
                          <span className="inline-flex items-center font-sans text-sm text-stone-600">
                            <IoCalendarOutline />
                            &nbsp;
                            {format(new Date(newsroompost.date), 'dd-MM-yyyy')}
                          </span>
                        </div>
                      </div>

                      <div
                        className="pl-7 pr-7 font-sans text-base leading-relaxed text-stone-600 sm:p-0 sm:pb-5"
                        dangerouslySetInnerHTML={{
                          __html: newsroompost.excerpt.rendered,
                        }}
                      />

                      <div className="pl-7 pr-7 sm:p-0">
                        <Link
                          href={`/monthly-release/${newsroompost.slug}`}
                          className="readmore font-Inter text-xs text-yellow-600 hover:text-stone-900 hover:underline"
                        >
                          Read more
                        </Link>
                      </div>
                    </div>
                  </div>
                </div>
              )
            })}
          </>
        </div>
        <div className="mb-10 mt-5">
          <ul className="flex justify-center">
            {paginations.map((page) => {
              //console.log(uniqid)
              return (
                <li
                  key={uniqid('page-')}
                  className={`border-1 mx-1 w-7 rounded bg-stone-600 py-2 text-center font-sans text-sm font-semibold text-stone-50 hover:bg-yellow-500 ${
                    props.pageActive == page.page
                      ? 'bg-yellow-500'
                      : 'text-stone-500 hover:bg-yellow-500 hover:text-stone-50'
                  }`}
                >
                  <Link href={page.url}>{page.page}</Link>
                </li>
              )
            })}
          </ul>
        </div>
        {/* </Container> */}
      </Layout>
    </>
  )
}

export const getServerSideProps: GetServerSideProps = async ({ params }:any) => {
  console.log('params', params)
  let pagehal = params && params.page ? Number(params.page) : 1
  const { posts, paginations } = await getPage(
    url,
    '/monthly-release/page/',
    pagehal
  )

  return {
    props: {
      newsroomposts: posts,
      paginations,
      pageActive: pagehal,
    },
  }
}

// export async function getStaticPaths() {
//   const paginations = await getPaginationStatic(url)
//   return {
//     paths: paginations,
//     fallback: false,
//   }
// }