//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 { 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/mediacorner/'

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

  return (
    <>
      <NextSeo
        title="Media Corner - GWK Cultural Park"
        description="Press Releases from GWK Bali"
        additionalLinkTags={[
          {
            rel: 'icon',
            href: '../../favicon/favicon.ico',
          },
        ]}
        openGraph={{
          type: 'website',
          url: 'https://www.gwkbali.com/media-corner/page/1',
          title: 'Media Corner - GWK Cultural Park',
          description: 'Press Releases from GWK Bali',
          images: [
            {
              url: 'https://cdn.sanity.io/images/helyis1v/production/8012e4065dff5de751920ed43307eb4245ed76d4-1024x683.jpg',
              width: 800,
              height: 600,
              alt: 'Press Releases from GWK Bali',
            },
            {
              url: 'https://cdn.sanity.io/images/helyis1v/production/8012e4065dff5de751920ed43307eb4245ed76d4-1024x683.jpg',
              width: 800,
              height: 600,
              alt: 'Press Releases from GWK Bali',
            },
          ],
        }}
      />
      <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">
                Media Corner
              </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;Press Releases
                </span>
              </h2>
              {/* <p className="text-stone-400 animate-fade font-sans text-base animate-delay-300 animate-duration-[1200ms] animate-once "><IoNewspaperOutline />Regularly News and Media from GWK Bali
              </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={`/media-corner/${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={`/media-corner/${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">
                              {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={`/media-corner/${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 ${
                    page.active
                      ? '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 async function getStaticProps({ params }) {
  const { posts, paginations } = await getPage(
    url,
    '/media-corner/page/',
    params.page
  )

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

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