import { useEffect, useRef, useState } from 'react'
import type { NextPage, NextPageContext } from 'next'
import Link from 'next/link'
import cx from 'classnames'
import { useInView, useIsomorphicLayoutEffect } from 'framer-motion'

import { getGlobalFields } from '@/lib/api/globals'

import Container from '@/components/shared/Container'

type Props = {
  statusCode: number
}

const Error: NextPage<Props> = ({ statusCode }) => {
  const [introHeight, setIntroHeight] = useState(0)
  const [isContentExpanded, setIsContentExpanded] = useState(false)
  const contentRef = useRef<HTMLDivElement>(null)
  const introRef = useRef<HTMLDivElement>(null)
  const isContentInView = useInView(contentRef, {
    margin: '0px 0px -33% 0px',
  })

  useEffect(() => {
    const isPastContent = contentRef?.current && window.pageYOffset > contentRef?.current?.getBoundingClientRect().top
    setIsContentExpanded(Boolean(isContentInView || isPastContent))
  }, [isContentInView])

  useIsomorphicLayoutEffect(() => {
    setIntroHeight(introRef.current?.clientHeight || 0)
  }, [])

  return (
    <>
      <div className="fixed inset-0 h-vh -z-1 bg-black"></div>

      <Container>
        <div className="flex items-end min-h-[calc(100vh_-_195px)] lg:min-h-[calc(100vh_-_300px)] md:min-h-[calc(100vh_-_240px)] sm:min-h-[calc(100vh_-_200px)]">
          <h1 className="text-h1 text-white lg:mb-[100px] md:mb-[80px] sm:mb-[50px] mb-[30px] pl-1">
            {statusCode === 404 ? `404` : `${statusCode}: An unexpected error has occurred`}
          </h1>
        </div>
      </Container>

      <section
        id="intro"
        ref={contentRef}
        className="relative overflow-hidden transition-colors"
        style={{ marginTop: `-${introHeight}px` }}
      >
        <div className="relative max-w-[1320px] sm:mx-[35px] md:mx-[45px] lg:mx-auto bg-white">
          <Container>
            <div className="grid grid-cols-12 gap-x-6">
              <article className="col-span-12 relative lg:pt-[77px] md:pt-[50px] sm:pt-[30px] pt-[20px] bg-white pb-32">
                <div className="text-h2 flex mb-[40px] pl-1 w-4/5 ">
                  Whoops! The page you are looking for may have been moved, removed, or never actually existed.
                </div>
                <div className="pl-1">
                  <Link
                    href="/"
                    className={`navbar-btn btn btn--arrow-block font-semibold uppercase md:ml-0 ml-auto btn--arrow-block-dark`}
                  >
                    Corporate Image Home
                    <span aria-hidden className="arrow-block arrow-block-dark"></span>
                  </Link>
                </div>
              </article>
            </div>
          </Container>
          <div
            className={cx(
              'absolute inset-y-0 left-1/2 w-vw -translate-x-1/2 bg-white transition-all duration-300 -z-1 ease-in-out-cubic',
              isContentExpanded ? 'sm:w-vw' : 'sm:w-full'
            )}
          />
        </div>
      </section>
    </>
  )
}

Error.getInitialProps = async (ctx: NextPageContext) => {
  const {
    res,
    // err
  } = ctx
  const { globals } = await getGlobalFields(false)
  const statusCode = res?.statusCode || 404

  return {
    statusCode,
    globals,
  }
}

export default Error