import Link from 'next/link'
import { m } from 'framer-motion'
import cx from 'classnames'

import { DEFAULT_SPRING_TRANSITION } from '@/lib/constants'
import { getFirstTerm } from '@/lib/utilities'

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

type Props = {
  variant: 'blog' | 'case_study' | 'project'
  featuredItem: any
}

export default function Hero({ featuredItem, variant }: Props) {
  const label = (() => {
    switch (variant) {
      case 'case_study':
        return 'Case Studies'
      case 'project':
        return 'Projects'
      case 'blog':
        return 'Blog / Events / News'
    }
  })()

  const isBlog = variant === 'blog'
  const averageColorIsDark = featuredItem?.averageColor?.isDark
  const firstTerm = getFirstTerm(featuredItem?.terms)

  return (
    <>
      <div
        className="fixed inset-0 h-vh -z-1 bg-gray-light"
        style={{ backgroundColor: featuredItem?.averageColor?.rgba }}
      >
        {featuredItem?.featuredImage && (
          <BlurImage
            src={featuredItem.featuredImage.node.imageUrl}
            alt={featuredItem.featuredImage.node.alt}
            placeholderSrc={featuredItem.featuredImage.node.placeholder}
            fill
            className="object-cover"
            sizes="100vw"
            priority
            quality={95}
          />
        )}
      </div>

      <section className="relative h-vh-header min-h-128 py-6 sm:py-12">
        <Container className="relative flex h-full z-10">
          <div className="flex flex-col flex-1">
            <div>
              <AnimateUnderline as="h2" className={cx('inline-block text-h6 relative')}>
                {label}
              </AnimateUnderline>
            </div>

            <div className={cx('mt-auto pt-6', averageColorIsDark && 'text-white')}>
              <h1 className={cx('pb-6 sm:pb-12 text-white', isBlog ? 'text-h11' : 'text-h1')}>
                {isBlog ? featuredItem.title : featuredItem.caseStudyProjectContent.heroSection.customerName}
              </h1>

              <m.div
                className={cx('w-full h-px origin-left bg-white')}
                initial={{ opacity: 0, scaleX: 0 }}
                animate={{ opacity: 1, scaleX: 1 }}
                transition={DEFAULT_SPRING_TRANSITION}
                aria-hidden
              />

              <div className="flex items-center gap-4 pt-4">
                {!isBlog && (
                  <div className="sm:hidden">
                    <CircleButton href={featuredItem.uri} inverted={!averageColorIsDark}>
                      View
                    </CircleButton>
                  </div>
                )}

                {firstTerm && (
                  <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 w-full">
                    <p className="text-photo-slider font-semibold text-white">Featured</p>
                    <div className={cx('hidden sm:block w-[3px] h-6 bg-black')} />
                    <p className={cx('text-photo-slider font-light text-white', !isBlog && 'uppercase')}>
                      {firstTerm.name}
                    </p>

                    {isBlog && (
                      <Link
                        href={featuredItem.uri}
                        className="sm:ml-auto shrink-0 text-photo-slider flex items-center group"
                      >
                        <span>{firstTerm.slug === 'event' ? 'Event Details' : 'Read the Story'}</span>
                        <span
                          aria-hidden
                          className={cx(
                            "flex items-center w-0 h-full ml-[10px] relative transition transition-all before:w-0 before:h-px before:opacity-0 after:border-l-[10px] after:border-y-[10px] after:border-y-transparent after:border-solid after:opacity-0 group-hover:w-[40px] group-hover:before:w-full group-hover:before:opacity-100 group-hover:after:translate-x-0 group-hover:after:-translate-y-2/4 group-hover:after:left-auto group-hover:after:right-0 group-hover:after:opacity-100 before:content-[''] before:absolute before:origin-center before:-translate-y-2/4 before:transition-all before:duration-[0.2s] before:ease-[ease-in-out] before:top-2/4 after:content-[''] after:absolute after:origin-center after:translate-x-2/4 after:-translate-y-2/4 after:transition-all after:duration-[0.2s] after:ease-[ease-in-out] after:right-2/4 after:top-2/4 after:border-black before:bg-black"
                          )}
                        />
                      </Link>
                    )}
                  </div>
                )}
              </div>
            </div>
          </div>

          {!isBlog && (
            <div className="hidden sm:block mt-auto pl-8">
              <CircleButton href={featuredItem.uri} inverted={averageColorIsDark}>
                View
              </CircleButton>
            </div>
          )}
        </Container>

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