import { useEffect, useState } from 'react'
import type { GetStaticProps, InferGetStaticPropsType } from 'next'
import { AnimatePresence, m } from 'framer-motion'

import { getGlobalFields } from '@/lib/api/globals'
import { getPostsPage } from '@/lib/api/posts'
import { getImageAverageColor } from '@/lib/color'
import { nodesFromEdges } from '@/lib/utilities'

import Container from '@/components/shared/Container'
import { CustomSelectFilter } from '@/components/shared/Filter'
import Hero from '@/components/sections/Hero'
import PostCard from '@/components/blocks/PostCard'

type Item = {
  slug: string
  title: string
  featuredImage?: any
  terms: {
    edges: {
      node: {
        name: string
        slug: string
        taxonomyName: string
      }
    }[]
  }
}

export default function Blog({
  page,
  posts,
  featuredImageAverageColor,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const POSTS_PER_PAGE = 9
  const [postsToShow, setPostsToShow] = useState(POSTS_PER_PAGE)
  const [filteredPosts, setFilteredPosts] = useState<Item[]>([])
  const [currentFilter, setCurrentFilter] = useState<string>()
  const currentItems = filteredPosts.slice(0, postsToShow)

  const filters = [
    {
      key: 'blog_type',
      label: 'Posts',
      options: [
        {
          label: 'Blog',
          value: 'blog',
        },
        {
          label: 'News',
          value: 'news',
        },
        {
          label: 'Event',
          value: 'event',
        },
      ],
    },
  ]

  useEffect(() => {
    const newPosts = posts.filter((post: any) => {
      return currentFilter ? post.categories.edges.some(({ node: { slug } }: any) => slug === currentFilter) : true
    })

    setFilteredPosts(newPosts)
    setPostsToShow(POSTS_PER_PAGE)
  }, [currentFilter, posts])

  return (
    <>
      <Hero
        variant="blog"
        featuredItem={{ ...page?.featuredBlogHeroSection?.featuredBlog, averageColor: featuredImageAverageColor }}
      />

      <div className="bg-white">
        <Container className="py-12 md:py-24">
          {/* Filters */}
          <p className="text-h9 pb-2">Showing</p>
          <div className="flex flex-wrap sm:items-center flex-col sm:flex-row gap-x-12 gap-y-6 pb-8">
            {filters.map(filter => (
              <CustomSelectFilter
                key={filter.key}
                label={filter.label}
                options={filter.options}
                selectedOption={currentFilter}
                onChange={setCurrentFilter}
              />
            ))}
          </div>

          {/* Card grid */}
          {currentItems.length > 0 ? (
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-16 sm:gap-x-12 sm:gap-y-24">
              <AnimatePresence>
                {currentItems.map((post: any) => (
                  <m.div
                    key={post.slug}
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    className="flex"
                  >
                    <PostCard post={post} />
                  </m.div>
                ))}
              </AnimatePresence>
            </div>
          ) : (
            // No results
            <p className="text-body-lg">No posts</p>
          )}

          {/* Load more button */}
          {postsToShow < filteredPosts.length && (
            <div className="pt-24 text-center">
              <button
                className="text-body-lg font-semibold"
                onClick={() => setPostsToShow(prev => prev + POSTS_PER_PAGE)}
              >
                Load More
              </button>
            </div>
          )}
        </Container>
      </div>
    </>
  )
}

export const getStaticProps: GetStaticProps = async ({ preview = false }) => {
  const { globals } = await getGlobalFields(preview)
  const { page, posts } = await getPostsPage()
  const featuredImageAverageColor = await getImageAverageColor(
    page?.featuredBlogHeroSection?.featuredBlog?.featuredImage?.node?.imageUrl
  )

  const allPosts = nodesFromEdges(posts?.edges || [])

  return {
    props: {
      globals,
      page,
      featuredImageAverageColor,
      posts: allPosts,
    },
    revalidate: 10,
  }
}