import type { GetStaticProps, InferGetStaticPropsType } from 'next'
import dynamic from 'next/dynamic'
import cx from 'classnames'

import { FeaturedImage, WpMedia } from '@/lib/types'
import { getGlobalFields } from '@/lib/api/globals'
import { getHomePage } from '@/lib/api/home'
import { OrbProvider, useOrb } from '@/lib/OrbContext'

import AnimateUnderline from '@/components/shared/AnimateUnderline'
import BlurImage from '@/components/shared/BlurImage'
import Button from '@/components/shared/Button'
import Container from '@/components/shared/Container'
import Divider from '@/components/shared/Divider'
import ResourceContent from '@/components/shared/ResourceContent'
import CallToAction from '@/components/sections/CallToAction'
import CalloutWithSlider from '@/components/sections/CalloutWithSlider'
import FeaturedCaseStudy from '@/components/sections/FeaturedCaseStudy'
import PullQuote from '@/components/sections/PullQuote'
import TrustedPartners from '@/components/sections/TrustedPartners'
import Callout from '@/components/blocks/Callout'
import ListingCard from '@/components/blocks/ListingCard'

const DynamicWorkingTogetherLottie = dynamic(() => import('@/components/shared/WorkingTogetherLottie'))

type HomePageContent = {
  mainHeroSection: {
    fieldGroupName: string
    heroTitle: string
    heroText: string
    subHeroTitle: string
    subHeroText: string
  }
  pullQuoteSection: {
    fieldGroupName: string
    enablePullquote: boolean
    quoteText: string
    quoteName: string
    quoteTitle: string
    quoteCompany: string
    enableQuoteButton: boolean
    buttonLink: {
      title: string
      url: string
    }
  }
  packagingSolutionsSection: HomePageSlider
  presentationMaterialsSection: HomePageSlider
  architechuralSampleKitSection: HomePageSlider
  secondHeroSection: {
    secondHeroTitle: string
    subHeroSubTitle: string
    bgImage: WpMedia
  }
  threeColumnSection: {
    columns: Column[]
  }
  workingTogetherSection: {
    description: string
    learnMorebutton: Record<any, any>
  }
  thirdHeroSection: {
    thirdHeroTitle: string
    thirdHeroSubTitle: string
    bgImage: WpMedia
  }
  recentCollabSection: {
    sectionTitle: string
    galleryButtonLink: any
    collabSlider: CollabSlider[]
  }
  trustedPartnerSection: {
    sectionTitle: string
    descriptionText: string
    logos: PartnerLogos[]
  }
  featuredCaseStudySection: {
    enableFeaturedCaseStudy: boolean
    caseStudyLogo: WpMedia
    introCopy: string
    featuredCaseStudy: any
  }
}

type HomePageSlider = {
  fieldGroupName: string
  sectionTitle: string
  descriptionText: string
  exploreButtonLink: {
    uri: string
  }
  sliderContent: any
}

type Column = {
  columnTitle: string
  columnDescriptionText: string
  buttonLink: any
}

type CollabSlider = {
  projectSlide: {
    uri: string
    caseStudyProjectContent: {
      heroSection: {
        customerName: string
      }
    }
    featuredImage?: FeaturedImage
    productTypes: any
  }
}

type PartnerLogos = {
  logoImage: WpMedia
  logoImageTwo: WpMedia
}

type Props = {
  page: {
    featuredImage?: FeaturedImage
    homepageContent: HomePageContent
    customResourcesSection: {
      resourcesSection: {
        sectionTitle: string
        sectionDescription: string
        resources: any
      }
    }
    customCtaSection: any
  }
  projects?: {
    nodes?: any[]
  }
}

export default function Home({ page, projects }: InferGetStaticPropsType<typeof getStaticProps>) {
  const {
    // title,
    featuredImage,
    homepageContent: {
      mainHeroSection: { heroTitle, heroText, subHeroTitle, subHeroText },
      packagingSolutionsSection: {
        sectionTitle: packagingSliderTitle,
        descriptionText: packagingSliderText,
        exploreButtonLink: packagingSliderButtonLink,
        sliderContent: packagingSliderContent,
      },
      presentationMaterialsSection: {
        sectionTitle: presentationSliderTitle,
        descriptionText: presentationSliderText,
        exploreButtonLink: presentationSliderButtonLink,
        sliderContent: presentationSliderContent,
      },
      architechuralSampleKitSection: {
        sectionTitle: sampleSliderTitle,
        descriptionText: sampleSliderText,
        exploreButtonLink: sampleSliderButtonLink,
        sliderContent: sampleSliderContent,
      },
      secondHeroSection: { secondHeroTitle, subHeroSubTitle, bgImage: secondHeroBgImage },
      threeColumnSection: { columns: threeColumns },
      workingTogetherSection: { description, learnMorebutton },
      thirdHeroSection: { thirdHeroTitle, thirdHeroSubTitle, bgImage: thirdHeroBgImage },
      recentCollabSection: {
        sectionTitle: collabTitle,
        galleryButtonLink,
        // collabSlider: CollabSlider
      },
      trustedPartnerSection: { sectionTitle: trustedPartnerTitle, descriptionText, logos: partnerLogos },
      pullQuoteSection: {
        enablePullquote,
        quoteText,
        quoteName,
        quoteTitle,
        quoteCompany,
        enableQuoteButton,
        buttonLink,
      },
      featuredCaseStudySection: { enableFeaturedCaseStudy, caseStudyLogo, introCopy, featuredCaseStudy },
    },
    customResourcesSection: {
      resourcesSection: { sectionTitle, sectionDescription, resources },
    },
    customCtaSection,
  } = page

  const { Orb } = useOrb()

  return (
    <OrbProvider>
      <div className="absolute inset-0 w-full h-[110vh] sm:h-vh md:h-[150vh] -z-1 bg-gray-light">
        {featuredImage && (
          <BlurImage
            src={featuredImage.node.imageUrl}
            alt={featuredImage.node.alt}
            placeholderSrc={featuredImage.node.placeholder}
            fill
            className="object-cover object-bottom"
            sizes="100vw"
            priority
          />
        )}
      </div>

      <div className="relative h-vh-header">
        <Container className="flex flex-col h-full">
          <div className="flex items-center lg:items-end flex-1 lg:pb-8">
            <h1 className="w-1/2 text-h1 lg:pb-32" dangerouslySetInnerHTML={{ __html: heroTitle }} />
          </div>
        </Container>
      </div>

      <div className="h-[10vh] sm:h-0 md:h-[50vh]" />

      <div className={cx('flex flex-col gap-y-16 md:gap-y-24 pt-8 pb-16 md:pb-24 bg-white')}>
        <Container>
          <h2 className="text-page-intro">{heroText}</h2>
        </Container>

        <Container>
          <AnimateUnderline className="inline-block">{subHeroTitle}</AnimateUnderline>
          <div className="pt-4 text-section-intro">{subHeroText}</div>
        </Container>

        {/* Packaging slider */}
        <CalloutWithSlider
          title={packagingSliderTitle}
          content={`<p>${packagingSliderText}</p>`}
          button={{
            title: 'Explore',
            url: packagingSliderButtonLink.uri,
          }}
          slides={packagingSliderContent}
        />

        <Container>
          <Divider />
        </Container>

        {/* Presentation materials slider */}
        <CalloutWithSlider
          title={presentationSliderTitle}
          content={`<p>${presentationSliderText}</p>`}
          button={{
            title: 'Explore',
            url: presentationSliderButtonLink.uri,
          }}
          slides={presentationSliderContent}
        />

        <Container>
          <Divider />
        </Container>

        {/* Sample kit slider */}
        <CalloutWithSlider
          title={sampleSliderTitle}
          content={`<p>${sampleSliderText}</p>`}
          button={{
            title: 'Explore',
            url: sampleSliderButtonLink.uri,
          }}
          slides={sampleSliderContent}
        />

        {/* Second Hero Section */}
        <div className="relative w-full h-[125vmin] overflow-hidden">
          <div className="absolute inset-[0_-200px] z-0">
            {secondHeroBgImage && (
              <BlurImage
                src={secondHeroBgImage.imageUrl}
                alt={secondHeroBgImage.alt}
                placeholderSrc={secondHeroBgImage.placeholder}
                fill
                className="object-contain object-center"
                sizes="100vw"
              />
            )}
          </div>

          <Container className="relative flex flex-col h-full">
            <div className="flex items-center flex-1">
              <h2 className="text-h1" dangerouslySetInnerHTML={{ __html: secondHeroTitle }} />
            </div>
          </Container>
        </div>

        {subHeroSubTitle && (
          <Container>
            <h2 className="max-w-screen-md text-page-intro">{subHeroSubTitle}</h2>
          </Container>
        )}

        {/* Three columns */}
        <Container>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-16">
            {threeColumns.map((column: any, index: number) => (
              <Callout
                key={index}
                heading={column.columnTitle}
                content={`<p>${column.columnDescriptionText}</p>`}
                button={column.buttonLink}
                isSmall
              />
            ))}
          </div>
        </Container>

        {/* Working together */}
        <section className="py-24 bg-black text-white">
          <Container>
            <div className="max-w-screen-md">
              <AnimateUnderline className="inline-block">Working Together</AnimateUnderline>

              <p className="pt-6 text-section-intro">{description}</p>

              {learnMorebutton && (
                <div className="pt-12">
                  <Button href={learnMorebutton.url} color="white">
                    Learn More
                  </Button>
                </div>
              )}
            </div>

            <DynamicWorkingTogetherLottie />
          </Container>
        </section>

        {/* Third hero */}
        <div className="relative w-full h-[125vmin] overflow-hidden">
          <div className="absolute inset-[0_-200px] z-0">
            {thirdHeroBgImage && (
              <BlurImage
                src={thirdHeroBgImage.imageUrl}
                alt={thirdHeroBgImage.alt}
                placeholderSrc={thirdHeroBgImage.placeholder}
                fill
                className="object-contain object-center"
                sizes="100vw"
              />
            )}
          </div>

          <Container className="relative flex flex-col h-full">
            <div className="flex items-center flex-1">
              <h2 className="text-h1" dangerouslySetInnerHTML={{ __html: thirdHeroTitle }} />
            </div>
          </Container>
        </div>

        {thirdHeroSubTitle && (
          <Container>
            <h2 className="max-w-screen-md text-page-intro">{thirdHeroSubTitle}</h2>
          </Container>
        )}

        {/* Recent collab */}
        <Container>
          <h2 className="pb-12 text-pull-quote">{collabTitle}</h2>
          {/* <h2 className="pb-2 text-pull-quote">{collabTitle}</h2>
            <p className="max-w-screen-md pb-12 text-body-lg">{useCasesSection.useCasesDescription}</p> */}

          <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-">
            {projects?.nodes?.map(
              (
                {
                  // slug,
                  uri,
                  // title,
                  featuredImage,
                  caseStudyProjectContent,
                  productIndustries,
                }: any,
                index: number
              ) => (
                <div key={index} className="flex">
                  <ListingCard
                    postType="project"
                    href={uri}
                    image={featuredImage?.node}
                    title={caseStudyProjectContent.heroSection.customerName}
                    term={productIndustries.nodes[0].name}
                    term2={caseStudyProjectContent.heroSection.projectType}
                  />
                </div>
              )
            )}
          </div>

          <div className="pt-12">
            <Button href={galleryButtonLink.uri} color="dark">
              Visit the gallery
            </Button>
          </div>
        </Container>

        {/* Trusted partners */}
        <TrustedPartners title={trustedPartnerTitle} content={descriptionText} logos={partnerLogos} />

        {/* Pull quote */}
        <Container>
          {enablePullquote && (
            <PullQuote
              quoteText={quoteText}
              fullName={quoteName}
              companyTitle={quoteTitle}
              companyName={quoteCompany}
              button={enableQuoteButton ? buttonLink : undefined}
            />
          )}
        </Container>

        {/* Featured case study */}
        {enableFeaturedCaseStudy && (
          <FeaturedCaseStudy
            image={featuredCaseStudy.featuredImage?.node}
            logo={caseStudyLogo}
            content={introCopy}
            url={featuredCaseStudy.uri}
          />
        )}

        {/* Resource content */}
        <Container>
          <ResourceContent sectionTitle={sectionTitle} sectionDescription={sectionDescription} resources={resources} />
        </Container>

        {/* Call to action */}
        {customCtaSection?.enableCta && (
          <div className="bg-white">
            <Container>
              <Divider />
            </Container>

            {customCtaSection?.enableCta && (
              <CallToAction heading={customCtaSection?.ctaText} link={customCtaSection?.ctaLink} accentColor="white" />
            )}
          </div>
        )}
      </div>
      <Orb />
    </OrbProvider>
  )
}

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

  return {
    props: {
      globals,
      page,
      projects,
    },
    revalidate: 10,
  }
}