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

import { useBreakpoint } from '@/lib/hooks'

import BlurImage from '@/components/shared/BlurImage'
import CircleButton from '@/components/shared/CircleButton'
import Container from '@/components/shared/Container'

type Props = {
  page: {
    uri: string
    id: string
    title: string
    featuredImage: {
      node: {
        alt: string
        imageUrl: string
        placeholder: string
      }
    }
    caseStudyProjectContent: {
      heroSection: {
        customerName: string
      }
    }

    averageColor: any
  }
}

export default function NextPage({ page }: Props) {
  const contentRef = useRef<HTMLDivElement>(null)
  const [contentHeight, setContentHeight] = useState(0)
  const { isMobile } = useBreakpoint()
  const {
    // title,
    uri,
    featuredImage,
    caseStudyProjectContent: { heroSection },
    averageColor,
  } = page

  const { customerName } = heroSection

  function handleResize() {
    setContentHeight(contentRef.current?.clientHeight || 0)
  }

  useIsomorphicLayoutEffect(() => {
    handleResize()
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  return (
    <section className="overflow-hidden bg-gray-light" style={{ backgroundColor: averageColor?.rgb }}>
      <Container>
        <div className="z-1">
          <div className="relative">
            <div
              ref={contentRef}
              className={cx(
                'flex flex-col w-full sm:w-1/2 lg:w-1/3 py-12 sm:py-20',
                averageColor?.isDark && 'text-white'
              )}
            >
              <p className="text-h6 text-white">Next Project</p>
              <h2 className="text-h3 pt-2 pb-5 text-white">{customerName}</h2>
              <CircleButton href={uri}>View</CircleButton>
            </div>

            {featuredImage && (
              <div
                className="relative sm:absolute sm:inset-y-0 sm:right-0 left-1/2 lg:left-1/3 w-vw sm:w-[50vw] lg:w-[66.66666vw] -translate-x-1/2 sm:translate-x-0"
                style={{ height: `${contentHeight}px` }}
              >
                <BlurImage
                  src={featuredImage.node.imageUrl}
                  alt={featuredImage.node.alt}
                  placeholderSrc={featuredImage.node.placeholder}
                  fill
                  className="object-cover"
                  sizes="100vw"
                />

                {averageColor && (
                  <div
                    className="absolute inset-0"
                    style={{
                      background: `linear-gradient(${isMobile ? '180deg' : '90deg'}, ${
                        averageColor.rgba
                      } 0%, rgba(0,0,0,0) 100%)`,
                    }}
                  />
                )}
              </div>
            )}
          </div>
        </div>
      </Container>
    </section>
  )
}