'use client'

import Comment from '@/components/Comment'
import NotionIcon from '@/components/NotionIcon'
import NotionPage from '@/components/NotionPage'
import ShareBar from '@/components/ShareBar'
import { siteConfig } from '@/lib/config'
import { isBrowser } from '@/lib/utils'
import Head from 'next/head'
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import CategoryItem from '../components/CategoryItem'
import { ArticleLock } from '../components/ArticleLock'
import ArticleAround from '../components/ArticleAround'
import CatalogDrawerWrapper from '../components/CatalogDrawerWrapper'
import TagItemMini from '../components/TagItemMini'
import CONFIG from '../config'

/**
 * 文章詳情頁
 */
const LayoutSlug = props => {
  const { post, prev, next, siteInfo, lock, validPassword } = props
  const router = useRouter()
  // 若為文件首頁文章則更新瀏覽器標題
  const index = siteConfig('GITBOOK_INDEX_PAGE', 'about', CONFIG)
  const basePath = router.asPath.split('?')[0]
  const title =
    basePath?.indexOf(index) > 0
      ? `${post?.title} | ${siteInfo?.description}`
      : `${post?.title} | ${siteInfo?.title}`

  const waiting404 = siteConfig('POST_WAITING_TIME_FOR_404') * 1000
  useEffect(() => {
    // 404 處理
    if (!post) {
      setTimeout(() => {
        if (isBrowser) {
          const article = document.querySelector(
            '#article-wrapper #notion-article'
          )
          if (!article) {
            router.push('/404').then(() => {
              console.warn('找不到頁面', router.asPath)
            })
          }
        }
      }, waiting404)
    }
  }, [post, router, waiting404])
  return (
    <>
      <Head>
        <title>{title}</title>
      </Head>

      {/* 文章加鎖 */}
      {lock && <ArticleLock validPassword={validPassword} />}

      {!lock && (
        <div id='container'>
          {/* 標題 */}
          <h1 className='text-3xl pt-12  dark:text-gray-300'>
            {siteConfig('POST_TITLE_ICON') && (
              <NotionIcon icon={post?.pageIcon} />
            )}
            {post?.title}
          </h1>

          {/* Notion 文章主體 */}
          {post && (
            <section className='px-1'>
              <div id='article-wrapper'>
                <NotionPage post={post} />
              </div>

              {/* 分享 */}
              <ShareBar post={post} />
              {/* 文章分類與標籤資訊 */}
              <div className='flex justify-between'>
                {siteConfig('POST_DETAIL_CATEGORY') && post?.category && (
                  <CategoryItem category={post.category} />
                )}
                <div>
                  {siteConfig('POST_DETAIL_TAG') &&
                    post?.tagItems?.map(tag => (
                      <TagItemMini key={tag.name} tag={tag} />
                    ))}
                </div>
              </div>

              {post?.type === 'Post' && (
                <ArticleAround prev={prev} next={next} />
              )}

              {/* <AdSlot />
              <WWAds className='w-full' orientation='horizontal' /> */}

              <Comment frontMatter={post} />
            </section>
          )}

          {/* 文章目錄 */}
          <CatalogDrawerWrapper {...props} />
        </div>
      )}
    </>
  )
}

export { LayoutSlug }
