import { motion } from 'framer-motion'
import { useRef } from 'react'
import { useLocation } from 'react-router-dom'

import { useUserSettings } from '@/components/users/UserSettingsProvider'
import PrefetchLink from '@/components/PrefetchLink'
import { cn } from '@/lib/utils'
import { useSharedTransitionStore } from '@/stores/sharedTransitionStore'

import type { FC, MouseEvent } from 'react'

import type { Post } from '@/types'

type Props = { posts:     Post[]
	       onClick?:  (event: MouseEvent<HTMLElement>) => void }


const PostList: FC<Props> = ({ posts, onClick }) => {
  const location = useLocation ()
  const { settings } = useUserSettings ()

  const setForLocationKey = useSharedTransitionStore (s => s.setForLocationKey)

  const cardRef = useRef<HTMLDivElement> (null)

  return (
      <div className="flex flex-wrap gap-6 p-4">
	{posts.map ((post, i) => {
	  const sharedId = `page-${ post.id }`
	  const layoutId = sharedId

	  return (
	      <PrefetchLink
		  to={`/posts/${ post.id }`}
		  key={post.id}
		  className="w-40 h-40"
		  state={{ sharedId }}
		  onClick={e => {
		    setForLocationKey (location.key, sharedId)
		    onClick?.(e)
		  }}>
		<motion.div
		    ref={cardRef}
		    layoutId={layoutId}
		    className={cn ('w-full h-full overflow-hidden rounded-xl shadow',
				   'transform-gpu will-change-transform',
				   settings.viewedPostDisplay === 'dim'
				   && post.viewed
				   && 'opacity-40 saturate-50',
				   (post.childPosts ?? []).length > 0 && 'ring-4 ring-green-500',
				   (post.parentPosts ?? []).length > 0 && 'ring-4 ring-yellow-500')}
		    whileHover={{ scale: 1.02 }}
		    onLayoutAnimationStart={() => {
		      if (!(cardRef.current))
			return

		      cardRef.current.style.position = 'relative'
		      cardRef.current.style.zIndex = '9999'
		    }}
		    onLayoutAnimationComplete={() => {
		      if (!(cardRef.current))
			return 

		      cardRef.current.style.zIndex = ''
		      cardRef.current.style.position = ''
		    }}
		    transition={{ layout: { duration: .2, ease: 'easeOut' } }}>
		  <img src={post.thumbnail || post.thumbnailBase || undefined}
		       alt={post.title || post.url}
		       title={post.title || post.url || undefined}
		       loading={i < 12 ? 'eager' : 'lazy'}
		       decoding="async"
		       className="object-cover w-full h-full"/>
		</motion.div>
	      </PrefetchLink>)
	})}
      </div>)
}

export default PostList
