//WORDPRESS

import parser from 'html-react-parser'
import Link from 'next/link'
import { useEffect, useState } from 'react'
import { NextSeo } from 'next-seo'
import { format } from 'date-fns'
import { IoCalendarOutline, IoFolderOutline } from 'react-icons/io5'
import PortableText from 'react-portable-text'

import { getImageLink } from '../../lib/wordpress.image'
import { OpenGlobalEvent } from 'lib/popupimage'

import Container from 'components/BlogContainer'
import Layout from 'components/Layout'
import { GetServerSideProps } from 'next'

export default function PostWordpress(props) {
  const { loading, post, preview } = props
  const [contentHtml, contentHtmlSet] = useState('')
  const [evenGlobal, eventGlobalSet] = useState(false)
  const featImgUrl = getImageLink(
    post._embedded['wp:featuredmedia'],
    post.featured_media
  )
  // console.log(contentHtml)
  //let postContentString: string = contentHtml
  //let postContent: contentHtml = postContentString as contentHtmlSet

  useEffect(() => {
    let popupimage = function () {
      alert('whoe')
    }

    let searchImage = function (docu) {
      let imgc = []
      let caption = []
      ;(function sc(doc) {
        if (doc.tagName != 'IMG' && doc.tagName != 'FIGCAPTION') {
          if (Array.from(doc.children).length > 0) {
            Array.from(doc.children).forEach(function (e) {
              sc(e)
            })
          }
        } else {
          if (doc.src) {
            imgc.push(doc.src)
          } else {
            caption.push(doc.innerHTML)
          }
        }
      })(docu)

      let nh = ''
      let num = 0
      imgc.forEach(function (l, i) {
        num++
        nh += `
          <div class="relative flex" style="overflow:hidden; height: auto;">
            <div>
              <img class="popup-image" style="width: 100%;" src="${l}" />
              ${(function () {
                if (caption[i]) {
                  //console.log(caption[i])
                  return `<p class="text-center text-sm pt-5 italic text-stone-600 leading-loose font-sans mb-3">${caption[i]}</p>`
                }
                return ``
              })()}
            </div>
          </div>
          `
      })
      return {
        count: num,
        html: nh,
      }
    }

    let docWp = document.createElement('div')
    docWp.innerHTML = post.content.rendered
    let newHtml = ''
    //console.log(docWp)
    Array.from(docWp.children).forEach(function (content) {
      if (
        content.tagName === 'H2' ||
        content.tagName === 'H1' ||
        content.tagName === 'H3' ||
        content.tagName === 'H4' ||
        content.tagName === 'H5' ||
        content.tagName === 'H6'
      ) {
        content.className = 'text-stone-600 leading-loose font-sans mb-3'
        newHtml += content.outerHTML
      }

      if (content.tagName === 'DIV') {
        content.className = 'text-stone-600 leading-loose font-sans mb-3'
        newHtml += content.outerHTML
      }

      if (content.tagName === 'P') {
        content.className = 'text-stone-600 leading-loose font-sans mb-3'
        newHtml += content.outerHTML
      }

      if (content.tagName === 'A') {
        content.className = 'text-yellow-600 leading-loose font-sans mb-3'
        newHtml += content.outerHTML
      }

      if (content.tagName === 'FIGURE') {
        let imgContainer = searchImage(content)
        let num = 3
        if (imgContainer.count < 3) {
          num = imgContainer.count
        }

        newHtml += `
          <div class="my-10" style="cursor:pointer; display:grid;grid-gap:10px;width: calc(100% - ${num}0px);grid-template-columns: calc(100% /${num}) calc(100% /${num}) calc(100% /${num})  ">
              ${imgContainer.html}
          </div>
        `
      }
    })

    document.body.addEventListener('click', OpenGlobalEvent, false)

    contentHtmlSet(newHtml)

    return function cleanup() {
      window.removeEventListener('click', OpenGlobalEvent)
    }
  }, [contentHtml, post.content.rendered, evenGlobal])

  const excerpt = post.excerpt.rendered.replace(/(<([^>]+)>)/gi, '')

  return (
    <Layout preview={preview} loading={loading}>
      <NextSeo
        title={post.title.rendered}
        //description = `${post.excerpt.rendered}.replace(/(<([^>]+)>)/gi, '')`
        description={excerpt}
        additionalLinkTags={[
          {
            rel: 'icon',
            href: '../favicon/favicon.ico',
          },
        ]}
        openGraph={{
          title: `${post.title.rendered}`,
          description: `${excerpt}`,
          url: 'https://www.gwkbali.com/monthly-release/' + `${post.slug}`,
          type: 'article',
          article: {
            publishedTime: `${post.date}`,
            // modifiedTime: '2018-01-21T18:04:43Z',
            // expirationTime: '2022-12-21T22:04:11Z',
            section: 'Monthly Release',
            // authors: [
            //   'https://www.example.com/authors/@firstnameA-lastnameA',
            //   'https://www.example.com/authors/@firstnameB-lastnameB',
            // ],
            // tags: ['Tag A', 'Tag B', 'Tag C'],
          },
          images: [
            {
              url: featImgUrl,
              width: 850,
              height: 650,
              alt: `${post.title.rendered}`,
            },
          ],
        }}
      />
      <div
        className="block min-h-[300px] w-full bg-stone-600 md:relative md:min-h-[500px]"
        style={{
          backgroundImage: 'url(' + featImgUrl + ')',
          backgroundSize: 'cover',
          backgroundPosition: 'center center',
          backgroundRepeat: 'no-repeat',
          backgroundAttachment: 'fixed',
        }}
      >
        <div className="lg:bottom:0 absolute block min-h-[300px] w-full bg-gradient-to-t from-stone-900 sm:bg-gradient-to-t sm:from-stone-900 md:absolute md:bottom-0 md:min-h-screen md:from-stone-900">
          <Container>
            <div className="absolute left-0 top-16 h-auto px-10 py-0 sm:top-[300px] md:mb-0 md:grid md:grid-cols-3 md:gap-10 ">
              <div className="relative col-span-3 animate-fade-up items-center p-0 align-middle animate-duration-[1200ms] animate-once sm:p-0 md:col-span-3 md:px-52 md:py-10 md:align-middle">
                <h1
                  className="pb-5 text-left text-3xl font-bold leading-normal text-stone-50 sm:text-center sm:text-3xl md:text-3xl xl:text-6xl"
                  dangerouslySetInnerHTML={{ __html: post.title.rendered }}
                />
              </div>
            </div>
          </Container>
        </div>
      </div>
      <Container>
        <div className="mx-auto mb-0 w-full px-5 py-10 sm:max-w-[80%]">
          <div className="md:col-span-2">
            <div className="mt-0">
              <div className="pb-3">
                <Link href="/monthly-release/page/1">
                  <span className="inline-flex items-center pb-5 pr-5 font-sans text-sm text-yellow-600 hover:text-stone-600">
                    <IoFolderOutline />
                    &nbsp;Monthly Update
                  </span>
                </Link>
                <span className="inline-flex items-center pb-5 pr-5 font-sans text-sm text-stone-600">
                  <IoCalendarOutline />
                  &nbsp;{format(new Date(post.date), 'dd-MM-yyyy')}
                </span>
                <hr className="" />
                <div>{parser(contentHtml)}</div>
              </div>
              {/* <PortableText
                content={(contentHtml)}
                serializers={{
                  normal: ({ children }) => (
                    <p className="pb-2">{children}</p>
                  ),
                  strong: ({ children }) => (
                    <strong className="font-semibold">
                      {children}
                    </strong>
                  ),
                  li: ({ children }) => (
                    <li className="special-list-item ml-5 list-disc">
                      {children}
                    </li>
                  ),
                }}
              /> */}
            </div>
          </div>
        </div>

        <div className="mb-5 mt-5">{/* <MorePosts /> */}</div>
      </Container>
    </Layout>
  )
}

export const el = function (el = 'div') {
  let f = document.createElement(el) as HTMLElement
  return f
}

export const getServerSideProps: GetServerSideProps = async (data) => {
  const post = await fetch(
    `https://cmswp.gwkbali.com/wp-json/wp/v2/monthly-release?slug=${
      data?.params.slug || ''
    }&_embed`
  ).then((res) => res.json())

  //console.log(post);

  return {
    props: {
      post: post[0],
    },
  }
}
// export async function getStaticPaths() {
//   const slugs = await fetch(
//     'https://cmswp.gwkbali.com/wp-json/wp/v2/monthly-release?_fields=slug&per_page=99'
//   ).then((res) => res.json())

//   const paths = slugs?.map(({ slug }) => `/monthly-release/${slug}`) || []

//   return {
//     paths,
//     fallback: false,
//   }
// }