import Link from 'next/link'
import { useGlobal } from '@/lib/global'
import formatDate from '@/lib/formatDate'
import { useEffect } from 'react'
import BLOG from '@/blog.config'

export default function HeaderArticle ({ post }) {
  const headerImage = post?.page_cover ? `url("${post.page_cover}")` : `url("/${BLOG.HOME_BANNER_IMAGE}")`
  const { isDarkMode } = useGlobal()

  const { locale } = useGlobal()
  const date = formatDate(
    post?.date?.start_date || post.createdTime,
    locale.LOCALE
  )

  const scrollTrigger = () => {
    const scrollS = window.scrollY
    const nav = document.querySelector('#sticky-nav')

    if (scrollS < 300) {
      nav && nav.classList.replace('bg-white', 'bg-none')
      nav && nav.classList.replace('text-black', 'text-white')
    } else {
      nav && nav.classList.replace('bg-none', 'bg-white')
      nav && nav.classList.replace('text-white', 'text-black')
    }
    updateTopNav()
  }
  useEffect(() => {
    scrollTrigger()
    window.addEventListener('scroll', scrollTrigger)
    return () => {
      window.removeEventListener('scroll', scrollTrigger)
    }
  })

  const updateTopNav = () => {
    if (!isDarkMode) {
      const stickyNavElement = document.getElementById('sticky-nav')
      if (window.scrollY < window.innerHeight) {
        stickyNavElement?.classList?.add('dark')
      } else {
        stickyNavElement?.classList?.remove('dark')
      }
    }
  }

  return (
      <div
        id="header"
        className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat animate__animated animate__fadeIn"
        style={{ backgroundImage: headerImage }}
      >
        <header className="animate__slideInDown animate__animated bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center font-sans">
          <div className='mt-24'>
            {/* 文章Title */}
            <div className="font-bold text-xl shadow-text flex justify-center text-white dark:text-white font-sans">
              {post.title}
            </div>

            <section className="flex-wrap shadow-text flex text-sm justify-center mt-2 text-white dark:text-gray-400 font-light leading-8">
              <div className='dark:text-gray-200'>
                {post.category && <>
                  <Link href={`/category/${post.category}`} passHref>
                  <a className="cursor-pointer mr-2 dark:hover:text-white border-b dark:border-gray-500 border-dashed">
                    <i className="mr-1 fas fa-folder-open" />
                    {post.category}
                  </a>
                  </Link>
                  <span className="mr-2">|</span>
                </>}

                {post.type[0] !== 'Page' && (
                  <>
                    <Link
                      href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
                      passHref
                    >
                      <a className="pl-1 mr-2 cursor-pointer hover:underline border-b dark:border-gray-500 border-dashed">
                      <i className="far fa-calendar-alt mr-1"/> {date}
                      </a>
                    </Link>
                  </>
                )}

                <div className="hidden busuanzi_container_page_pv font-light mr-2">
                  <span className="mr-2">|</span>
                  <span className="mr-2 busuanzi_value_page_pv" />
                  次访问
                </div>
              </div>
            </section>
          </div>
        </header>
      </div>
  )
}