import { m } from 'framer-motion'
import cx from 'classnames'
import dayjs from 'dayjs'

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

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

type Props = {
  post: any
}

export default function PostCard({ post }: Props) {
  const { uri, featuredImage, title, date, categories, blogContent } = post
  const image = featuredImage?.node
  const firstCategory = getFirstTerm(categories)
  const { accentColor } = blogContent
  const isEvent = firstCategory?.slug === 'event'

  const getAccentColor = (color: string) => {
    switch (color) {
      case 'purple':
      case 'blue':
        return `${color}-light`
      default:
        return color
    }
  }

  return (
    <m.div initial="initial" whileHover="hover" animate="initial" className="group relative flex flex-col w-full">
      <div
        className={cx(
          `relative flex flex-1 flex-col w-full`,
          accentColor && `bg-accent-${getAccentColor(accentColor)}`
        )}
      >
        <div className="relative aspect-[3/1] bg-gray-light">
          {image && (
            <BlurImage
              src={image.imageUrl}
              alt={image.alt}
              placeholderSrc={image.placeholder}
              fill
              className="object-cover"
              sizes={`(min-width: ${BREAKPOINTS.md}) 33vw, (min-width: ${BREAKPOINTS.sm}) 50vw, 100vw`}
            />
          )}
        </div>
        <div
          className={cx(
            `transform group-hover:-translate-y-[122px] transition duration-200 ease-[cubic-bezier(0.85,0,0.15,1)] flex-1 p-6`,
            accentColor && `bg-accent-${getAccentColor(accentColor)}`
          )}
        >
          <div className="flex gap-2 pb-2">
            {firstCategory && (
              <>
                <p className="text-h8 text-white">{firstCategory?.name}</p>
                <div className="w-[3px] h-4 bg-black" />
              </>
            )}
            <p className="text-h8 text-white">{dayjs(date).format('MMMM D, YYYY')}</p>
          </div>
          <h3 className="text-subtitle pb-1">{title}</h3>
        </div>
      </div>

      <p className="py-2 text-body-lg font-semibold flex sm:inline-flex items-center">
        <span>{isEvent ? '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"
          )}
        />
      </p>

      <m.div
        className="h-1 w-full mt-auto bg-black origin-left"
        initial={{ opacity: 0, scaleX: 0 }}
        whileInView={{ opacity: 1, scaleX: 1 }}
        viewport={{
          once: true,
          margin: `0px 0px -10% 0px`,
        }}
        transition={DEFAULT_SPRING_TRANSITION}
        aria-hidden
      />

      <a href={uri} className="block absolute inset-0">
        <span className="sr-only">Read {title}</span>
      </a>
    </m.div>
  )
}