import Image from 'next/image'
import cx from 'classnames'

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 AsymmetricalPhoto from '@/components/sections/AsymmetricalPhoto'
import CallToAction from '@/components/sections/CallToAction'
import FeaturedCaseStudy from '@/components/sections/FeaturedCaseStudy'
import FeatureSlider from '@/components/sections/FeatureSlider'
import FullWidthPhoto from '@/components/sections/FullWidthPhoto'
import PullQuote from '@/components/sections/PullQuote'
import Callout from '@/components/blocks/Callout'
import ListingCard from '@/components/blocks/ListingCard'

type MainHeroSection = {
  fieldGroupName: string
  productLabel: string
  heroTitle: string
  heroText: string
  subHeroTitle: string
  subHeroText: string
}

type SliderButtonLink = {
  title: string
  url: string
}
type SliderImage = {
  imageSlide?: {
    imageUrl: string
    alt: string
    placeholder: string
  }
  imageCaption: string
}
type KeyFeatureSlider = {
  sliderTitle: string
  sliderText: string
  sliderButtonLink: SliderButtonLink
  sliderImages: SliderImage[]
}

type PullQuoteSection = {
  fieldGroupName: string
  enablePullquote: boolean
  quoteText: string
  quoteName: string
  quoteTitle: string
  quoteCompany: string
  enableQuoteButton: boolean
  buttonLink: SliderButtonLink
}

type ImageGridSection = {
  fieldGroupName: string
  sectionTitle: string
  descriptionText: string
  logos: Logo[]
}
type Logo = {
  logoName: string
  logoImage: {
    altText: string
    sourceUrl: string
  }
}

type PDFDownloadSection = {
  fieldGroupName: string
  enablePdfSection: boolean
  copyText: string
  pdfUrl: string
}

type ThreeImageGridSection = {
  enableGridImageSection: boolean
  fieldGroupName: string
  removePadding: ('top' | 'bottom')[] | null
  largeImagePlacement: 'left' | 'right'
  photoGrid: {
    fieldGroupName: string
    image: {
      alt: string
      imageUrl: string
      placeholder: string
    }
  }[]
}

type DesignOptionsSection = {
  fieldGroupName: string
  sectionTitle: string
  columns: DesignColumns[]
}
type DesignColumns = {
  columnTitle: string
  columnDescriptionText: string
  buttonLink: any
}

type FullImageSection = {
  enableFullImage: boolean
  removePadding: ('top' | 'bottom')[] | null
  image: {
    alt: string
    imageUrl: string
    placeholder: string
  }
}

type UseCasesSection = {
  useCasesDescription: string
  productType: {
    name: string
    slug: string
    uri: string
    projects: {
      nodes: UseCase[]
    }
  }
}
type UseCase = {
  uri: string
  title: string
  slug: string
  featuredImage?: any
  productIndustries?: any
  caseStudyProjectContent: {
    heroSection: {
      customerName: string
      projectType: string
    }
  }
}

type CaseStudySection = {
  enableFeaturedCaseStudy: boolean
  caseStudyLogo: {
    imageUrl: string
    alt: string
    placeholder: string
  }
  introCopy: string
  featuredCaseStudy: any
}

type CrossSellSection = {
  leftProduct: {
    fieldGroupName: string
    productCategoryLabel: string
    productTypeName: string
    productImage: any
    productLink: any
  }
  rightProduct: {
    fieldGroupName: string
    productCategoryLabel: string
    productTypeName: string
    productImage: any
    productLink: any
  }
}

type ProductPageContent = {
  mainHeroSection: MainHeroSection
  keyFeatureSliders: KeyFeatureSlider[]
  pullQuoteSection: PullQuoteSection
  productStyles: ImageGridSection
  pdfDownloadSection: PDFDownloadSection
  threeImageGridSection: ThreeImageGridSection
  designOptionsSection: DesignOptionsSection
  fullImageSection: FullImageSection
  useCasesSection: UseCasesSection
  featuredCaseStudySection: CaseStudySection
  crossSellSection: CrossSellSection
  customCtaSection: {
    accentColor: string
    ctaText: string
    ctaLink: {
      title: string
      url: string
    }
    enableCta: any
  }
}

type Page = {
  title: string
  featuredImage?: {
    node: {
      imageUrl: string
      alt: string
      placeholder: string
    }
  } | null
  productPageContent: ProductPageContent
}

type Props = {
  page: Page
}

export default function Product({ page }: Props) {
  const { Orb } = useOrb()

  const {
    // title,
    featuredImage,
    productPageContent: {
      mainHeroSection,
      keyFeatureSliders: keyFeatureSlidersArray,
      pullQuoteSection,
      productStyles: {
        // fieldGroupName: productStylesFieldGroupName,
        sectionTitle: productStylesSectionTitle,
        descriptionText: productStylesDescriptionText,
        logos: logosArray,
      },
      pdfDownloadSection,
      threeImageGridSection,
      designOptionsSection,
      fullImageSection,
      useCasesSection,
      featuredCaseStudySection,
      crossSellSection,
      customCtaSection,
    },
  } = page

  const {
    // fieldGroupName: mainHeroFieldGroupName,
    productLabel,
    heroTitle,
    heroText,
    subHeroTitle,
    subHeroText,
  } = mainHeroSection

  const {
    productType: {
      slug: productTypeSlug,
      projects: { nodes: useCases },
    },
  } = useCasesSection

  const {
    leftProduct: {
      // fieldGroupName: leftFieldGroupName,
      productCategoryLabel: leftCategoryLabel,
      productTypeName: leftProductTypeName,
      productImage: leftProductImage,
      productLink: leftProductLink,
    },
    rightProduct: {
      // fieldGroupName: rightFieldGroupName,
      productCategoryLabel: rightCategoryLabel,
      productTypeName: rightProductTypeName,
      productImage: rightProductImage,
      productLink: rightProductLink,
    },
  } = crossSellSection

  const { sectionTitle: designSectionTitle, columns: designColumns } = designOptionsSection

  return (
    <>
      <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 py-6 sm:py-12">
        <Container className="flex flex-col h-full">
          <div className="pb-4">
            <AnimateUnderline className="inline-block uppercase">{productLabel}</AnimateUnderline>
          </div>

          <div className="flex flex-col justify-center md:justify-end flex-1">
            <h1 className="w-1/2 text-h1">{heroTitle}</h1>
          </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 bg-white',
          customCtaSection?.enableCta ?? 'pb-16 md:pb-24'
        )}
      >
        <Container>
          <h2 className="lg:w-5/6 text-page-intro">{heroText}</h2>
        </Container>

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

        {/* Feature slider */}
        <div className="flex flex-col gap-y-16 md:gap-y-0">
          {keyFeatureSlidersArray.map((item, index: number) => (
            <FeatureSlider
              key={index}
              title={item.sliderTitle}
              content={item.sliderText}
              button={item.sliderButtonLink}
              slides={item.sliderImages}
              reverse={Boolean(index % 2)}
            />
          ))}
        </div>

        {/* Pull quote */}
        {pullQuoteSection?.enablePullquote && (
          <Container>
            <PullQuote
              quoteText={pullQuoteSection?.quoteText}
              fullName={pullQuoteSection.quoteName}
              companyTitle={pullQuoteSection.quoteTitle}
              companyName={pullQuoteSection.quoteCompany}
            />
          </Container>
        )}

        {/* Product styles */}
        <section className="py-24 text-white bg-black">
          <Container>
            <AnimateUnderline className="inline-block">{productStylesSectionTitle}</AnimateUnderline>

            <p className="pt-8 text-section-intro">{productStylesDescriptionText}</p>

            <div className="grid sm:grid-cols-3 gap-y-12 sm:gap-y-36 pt-16 sm:pt-24">
              {logosArray.map((item, index) => (
                <div
                  key={index}
                  className="flex flex-col items-center border-t sm:border-t-0 sm:border-l border-gray-dark sm:[&:nth-child(3n)]:border-r sm:last:border-r"
                >
                  <div className="relative aspect-4/3 w-full">
                    <Image
                      src={item.logoImage.sourceUrl}
                      alt={item.logoImage.altText}
                      fill
                      className="object-contain"
                    />
                  </div>
                  <p className="text-h12">{item.logoName}</p>
                </div>
              ))}
            </div>
          </Container>
        </section>

        {/* PDF download */}
        {pdfDownloadSection.enablePdfSection && (
          <Container>
            <h2 className="pb-8 text-pull-quote">{pdfDownloadSection.copyText}</h2>
            <Button href={pdfDownloadSection.pdfUrl} color="dark" external target="_blank">
              Download
            </Button>
          </Container>
        )}

        {/* Asymmetrical photo grid */}
        {threeImageGridSection.enableGridImageSection && (
          <Container>
            {threeImageGridSection.photoGrid[0].image && <AsymmetricalPhoto key="1" {...threeImageGridSection} />}
          </Container>
        )}

        {/* Design options */}
        <Container>
          <AnimateUnderline className="hidden md:inline-block">{designSectionTitle}</AnimateUnderline>

          <div className="grid md:grid-cols-3 gap-16 md:gap-6 md:pt-12">
            {designColumns.map(({ columnTitle, columnDescriptionText, buttonLink }, index) => (
              <Callout
                key={index}
                heading={columnTitle}
                content={`<p>${columnDescriptionText}</p>`}
                button={buttonLink}
                isSmall
              />
            ))}
          </div>
        </Container>

        {/* Full image */}
        {fullImageSection.enableFullImage && (
          <Container>
            <FullWidthPhoto {...fullImageSection} />
          </Container>
        )}

        <Container>
          <Divider />
        </Container>

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

          <OrbProvider>
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-16 sm:gap-x-12 sm:gap-y-24">
              {useCases.map(({ slug, uri, featuredImage, caseStudyProjectContent, productIndustries }) => (
                <div key={slug} 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>

            <Orb />
          </OrbProvider>

          <div className="pt-12">
            <Button href={`/projects?product_type=${productTypeSlug}`} color="dark">
              See More Projects
            </Button>
          </div>
        </Container>

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

        {/* Cross sell */}
        <Container>
          <h2 className="sm:w-3/5 pb-6 md:pb-12 text-h2">Discover our other product lines</h2>

          <OrbProvider>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-16 sm:gap-x-12 sm:gap-y-24">
              <div className="flex">
                <ListingCard
                  postType="project"
                  href={leftProductLink.url}
                  image={leftProductImage}
                  title={leftCategoryLabel}
                  term={leftProductTypeName}
                />
              </div>

              <div className="flex">
                <ListingCard
                  postType="project"
                  href={rightProductLink.url}
                  image={rightProductImage}
                  title={rightCategoryLabel}
                  term={rightProductTypeName}
                />
              </div>
            </div>

            <Orb />
          </OrbProvider>
        </Container>

        {/* Custom CTA Section */}
        {customCtaSection?.enableCta && (
          <CallToAction
            heading={customCtaSection?.ctaText}
            link={customCtaSection?.ctaLink}
            accentColor={customCtaSection?.accentColor}
            linkColor="white"
          />
        )}
      </div>
    </>
  )
}