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

import { getGlobalFields } from '@/lib/api/globals'
import { getAboutUsPage } from '@/lib/api/about-us'

import AnimateUnderline from '@/components/shared/AnimateUnderline'
import BlurImage from '@/components/shared/BlurImage'
import Container from '@/components/shared/Container'
import Icon from '@/components/shared/Icon'
import MemberCard from '@/components/blocks/MemberCard'
import Callout from '@/components/blocks/Callout'
import Award from '@/components/blocks/Award'
import AsymmetricalPhoto from '@/components/sections/AsymmetricalPhoto'
import CallToAction from '@/components/sections/CallToAction'
import FullWidthPhoto from '@/components/sections/FullWidthPhoto'
import ProductionSpecs from '@/components/sections/ProductionSpecs'

export default function AboutUs({ 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,
    featuredImage,
    aboutUsPageContent: {
      heroSection,
      subHeroFullImageSection,
      twoColumnSection,
      familyOfBrandsSection,
      familyOfBrandsFullImageSection,
      lbsSection,
      lbsFullImageSection,
      archivalProductsSection,
      ourHistorySection,
      ourPeopleSection,
      awardsFullImageSection,
      awardsSection,
    },
    customCtaSection,
  } = page

  const { heroTitle, mainDescription, subHeroTitle, subHeroText } = heroSection
  const { leftColumn, rightColumn } = twoColumnSection

  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>

      <div className="h-vh-header" />

      <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 ref={introRef}>
              <div className="flex justify-between items-center pt-6 pb-7">
                <AnimateUnderline as="h2" className="text-xl">
                  {title}
                </AnimateUnderline>
                <a href="#intro" aria-hidden="true">
                  <Icon name="arrow-down" className="w-8 text-black" />
                </a>
              </div>
            </div>
            <div className="grid gap-y-12 sm:gap-y-20 lg:gap-y-24 pt-6 pb-12 sm:pb-20 lg:pb-24 bg-white">
              <h1 className="text-h1">{heroTitle}</h1>
              <p className="text-page-intro">{mainDescription}</p>
              <div>
                <AnimateUnderline className="inline-block">{subHeroTitle}</AnimateUnderline>
                <div className="pt-4 text-section-intro">{subHeroText}</div>
              </div>
              {/* SubHero Full Image */}
              {subHeroFullImageSection.enableFullImage && <FullWidthPhoto {...subHeroFullImageSection} aspect="16/9" />}
              {(leftColumn.columnTitle || rightColumn.columnTitle) && (
                <div className="grid xs:grid-cols-1 md:grid-cols-2 gap-12 sm:gap-20 lg:gap-16">
                  {leftColumn.columnTitle && (
                    <div>
                      <Callout heading={leftColumn.columnTitle} content={leftColumn.columnText} />
                    </div>
                  )}
                  {rightColumn.columnTitle && (
                    <div>
                      <Callout heading={rightColumn.columnTitle} content={rightColumn.columnText} />
                    </div>
                  )}
                </div>
              )}
              <div>
                <AnimateUnderline className="inline-block">{familyOfBrandsSection.title}</AnimateUnderline>
                <div className="pt-4 text-section-intro">{familyOfBrandsSection.descriptionText}</div>
              </div>
              {/* FOB Full Image Section */}
              {familyOfBrandsFullImageSection.enableFullImage && (
                <FullWidthPhoto {...familyOfBrandsFullImageSection} aspect="16/9" />
              )}
              {/* LBS */}
              <Callout heading={lbsSection.title} content={lbsSection.descriptionText} button={lbsSection.lbsLink} />
              {/* LBS Full Image */}
              {lbsFullImageSection.enableFullImage && <FullWidthPhoto {...lbsFullImageSection} aspect="16/9" />}
              {/* Archival */}
              <Callout
                heading={archivalProductsSection.title}
                content={archivalProductsSection.descriptionText}
                button={archivalProductsSection.buttonLink}
              />
              {/* Our History */}
              <ProductionSpecs specs={ourHistorySection.productionSpecsSection} heading={ourHistorySection.title} />
              <AsymmetricalPhoto
                removePadding={ourHistorySection.removePadding}
                largeImagePlacement={ourHistorySection.largeImagePlacement}
                photoGrid={ourHistorySection.photoGrid}
              />
              {/* Our People */}
              <div>
                <AnimateUnderline className="inline-block">{ourPeopleSection.title}</AnimateUnderline>
                <div className="pt-4 text-section-intro">{ourPeopleSection.descriptionText}</div>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-16 sm:gap-x-12 sm:gap-y-24">
                {ourPeopleSection.teamMembers?.map((member: any) => (
                  <div key={member.fieldGroupName} className="flex">
                    <MemberCard
                      image={member.memberImage}
                      name={member.memberName}
                      jobtitle={member.jobTitle}
                      phone={member.phoneNumber}
                      email={member.email}
                    />
                  </div>
                ))}
              </div>
              <div>
                <AnimateUnderline className="inline-block">Executive Team</AnimateUnderline>
                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-16 sm:gap-x-12 sm:gap-y-24 pt-4">
                  {ourPeopleSection.executiveTeamMembers?.map((member: any) => (
                    <MemberCard
                      key={member.fieldGroupName}
                      image={member.memberImage}
                      name={member.memberName}
                      jobtitle={member.jobTitle}
                      phone={member.phoneNumber}
                      email={member.email}
                    />
                  ))}
                </div>
              </div>
              {/*Awards Section*/}
              <div>
                <AnimateUnderline className="inline-block pb-8">Awards</AnimateUnderline>
                <div className="grid gap-y-12 sm:gap-y-20">
                  {awardsFullImageSection.enableFullImage && (
                    <FullWidthPhoto {...awardsFullImageSection} aspect="16/9" />
                  )}
                  {awardsSection.awards.map((award: any, index: number) => (
                    <Award
                      key={index}
                      image={award.awardImage}
                      title={award.awardTitle}
                      blurb={award.awardBlurb}
                      description={award.awardDescription}
                      link={award.awardLink}
                    />
                  ))}
                </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>

        {/* CTA */}
        <div className="bg-white">
          {customCtaSection?.enableCta && (
            <CallToAction heading={customCtaSection?.ctaText} link={customCtaSection?.ctaLink} />
          )}
        </div>
      </section>
    </>
  )
}

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

  return {
    props: {
      globals,
      page,
    },
    revalidate: 10, // In seconds
  }
}