import { useEffect, useRef, useState } from 'react'
import cx from 'classnames'
import { useInView, useIsomorphicLayoutEffect } from 'framer-motion'

import ParseFlexibleContent from '@/components/parsers/ParseFlexibleContent'
import Container from '@/components/shared/Container'
import SocialLinks from '@/components/shared/SocialLinks'
import ResourceContent from '@/components/shared/ResourceContent'
import BlurImage from '@/components/shared/BlurImage'

type Props = {
  page: {
    title: string
    content: string
    accentColor?: string
    featuredImage?: {
      node: {
        imageUrl: string
        alt: string
        placeholder: string
      }
    } | null
    customResourcesSection: {
      resourcesSection: {
        sectionTitle: string
        sectionDescription: string
        resources: any
      }
    }
    template: {
      thankYouPageContent: {
        bodySection: any
      }
    }
  }
}

export default function ThankYouPage({ page }: Props) {
  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,
    featuredImage,
    customResourcesSection: {
      resourcesSection: { sectionTitle, sectionDescription, resources },
    },
    template: { thankYouPageContent },
  } = page

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

  return (
    <>
      <div className="fixed inset-0 h-vh -z-1 bg-gray-light">
        {featuredImage && (
          <BlurImage
            src={featuredImage.node.imageUrl}
            alt={featuredImage.node.alt}
            placeholderSrc={featuredImage.node.placeholder}
            fill
            className="object-cover"
            sizes="100vw"
            priority
          />
        )}
      </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-8 col-span-12">
                  <div
                    className="page-content-intro [&_h1]:text-h2 [&_h1]:mb-5 [&_h1]:mb-10 [&_p]:text-[20px] [&_p]:leading-[30px] [&_p]:font-light"
                    dangerouslySetInnerHTML={{ __html: content }}
                  />
                </div>
                <div className="md:col-start-10 md:col-span-3 col-span-12 flex md:justify-end ms:mt-12 mt-10">
                  <SocialLinks title="Follow Us" containerStyles="inline-block" />
                </div>
              </div>
              <ParseFlexibleContent sections={bodySection} accentColor={'#ffffff;'} />
              <ResourceContent
                sectionTitle={sectionTitle}
                sectionDescription={sectionDescription}
                resources={resources}
              />
            </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>
    </>
  )
}