import type { GetStaticProps, InferGetStaticPropsType } from 'next'
import { useEffect, useRef, useState } from 'react'
import { m, useInView, useIsomorphicLayoutEffect } from 'framer-motion'
import cx from 'classnames'

import { getGlobalFields } from '@/lib/api/globals'
import { getPriPolicyPage } from '@/lib/api/privacy-policy'

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

type Props = {
  page: {
    title: string
    content: string
  }
}

export default function PrivacyPolicy({ page }: InferGetStaticPropsType<typeof getStaticProps>) {
  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])

  const { title, content } = page

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

  return (
    <>
      <div className="fixed inset-0 h-vh -z-1 bg-black">
        <m.div
          className="absolute inset-0"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5 }}
        ></m.div>
      </div>

      <Container>
        <div className="flex items-end min-h-[calc(100vh_-_320px)]">
          <h1 className="text-h1 text-white lg:mb-[100px] md:mb-[80px] sm:mb-[50px] mb-[30px]">{title}</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 gap-y-12 sm:gap-y-20 lg:gap-y-24 lg:pt-20 md:pt-16 sm:pt-8 pt-5 pb-12 sm:pb-20 lg:pb-24 bg-white">
              <div className="grid grid-cols-12 gap-4">
                <div className="md:col-start-1 md:col-span-11 col-span-12">
                  <ParseContent content={content} />
                </div>
              </div>
            </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>
    </>
  )
}

export const getStaticProps: GetStaticProps<Props> = async ({ preview = false }) => {
  const { globals } = await getGlobalFields(preview)
  const { page } = await getPriPolicyPage()

  return {
    props: {
      globals,
      page,
    },
  }
}