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

import { FeaturedImage, PageCategoryContent } from '@/lib/types'

import Container from '@/components/shared/Container'
import ResourceContent from '@/components/shared/ResourceContent'
import GlossaryFaqLeftPanel from '@/components/sections/GlossaryFaqLeftPanel'
import GlossaryFaqHero from '@/components/sections/GlossaryFaqHero'
import CallToAction from '@/components/sections/CallToAction'

type Props = {
  page: {
    title: string
    content: string
    featuredImage?: {
      node: {
        imageUrl: string
        alt: string
        placeholder: string
      }
    } | null
    customResourcesSection: {
      resourcesSection: {
        sectionTitle: string
        sectionDescription: string
        resources: any
      }
    }
    pageCategoryContent: PageCategoryContent
    customCtaSection: {
      ctaText: string
      ctaLink: {
        title: string
        url: string
      }
      enableCta: any
    }
  }
  index: React.ReactNode
  mainContent: React.ReactNode
}

export default function GlossaryFaqLayout({ page, index, mainContent }: Props) {
  const {
    title,
    featuredImage,
    pageCategoryContent,
    customResourcesSection: {
      resourcesSection: { sectionTitle, sectionDescription, resources },
    },
    customCtaSection,
  } = page

  const introRef = useRef<HTMLDivElement>(null)
  const contentRef = useRef<HTMLDivElement>(null)
  const [introHeight, setIntroHeight] = useState(0)
  const [isContentExpanded, setIsContentExpanded] = useState(false)
  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)
  }, [])

  const pageCategories = pageCategoryContent.pageCategories.map(pageCategory => pageCategory.categoryContent)

  return (
    <>
      <GlossaryFaqHero featuredImage={featuredImage as FeaturedImage} title={title} />
      <section ref={contentRef} className={`relative overflow-hidden transition-colors`}>
        <Container>
          <div className="grid grid-cols-12 gap-6">
            <div className="md:block hidden md:col-span-3 col-span-12 relative py-10 sm:py-13 md:py-18 lg:py-28 bg-white before:content-[''] md:before:w-[45px] sm:before:w-[30px] md:before:left-[-45px] sm:before:left-[-30px] before:block before:absolute before:bg-white before:inset-y-0 after:content-[''] md:after:w-[45px] sm:after:w-[30px] md:after:right-[-45px] sm:after:right-[-30px] after:block after:absolute after:bg-white after:inset-y-0">
              <GlossaryFaqLeftPanel
                contentRef={contentRef}
                introHeight={introHeight}
                pageCategories={pageCategories}
                isContentExpanded={isContentExpanded}
              >
                {index}
              </GlossaryFaqLeftPanel>
            </div>
            <div className="md:col-start-5 md:col-span-8 col-span-12 relative py-10 sm:py-13 md:py-18 lg:py-24 bg-white before:content-[''] md:before:w-[45px] sm:before:w-[30px] md:before:left-[-45px] sm:before:left-[-30px] before:block before:absolute before:bg-white before:inset-y-0 after:content-[''] md:after:w-[45px] sm:after:w-[30px] md:after:right-[-45px] sm:after:right-[-30px] after:block after:absolute after:bg-white after:inset-y-0">
              {mainContent}
              <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>
          </div>
        </Container>
      </section>
      {customCtaSection?.enableCta && (
        <CallToAction heading={customCtaSection?.ctaText} link={customCtaSection?.ctaLink} linkColor="white" />
      )}

      <section className="bg-white py-[100px]">
        <Container>
          <ResourceContent sectionTitle={sectionTitle} sectionDescription={sectionDescription} resources={resources} />
        </Container>
      </section>
    </>
  )
}