'use client';
import useInfiniteLoad from '@/hooks/use-infinite-load';
import { Loader2 } from 'lucide-react';
import { api } from '@/lib/trpc/client';
import { transformPostsToArticleList } from '@/features/posts/_lib/transformers';
import { PostOrderEnum, TopicsEnum } from '@/config/enums';
import VisionItem from '@/components/shared/articles/vision-item';

export default function VisionList() {
  const {
    data: { pages = [] } = {},
    isFetching,
    fetchNextPage,
    hasNextPage
  } = api.posts.paginate.useInfiniteQuery(
    {
      with: ['vision'],
      topic: TopicsEnum.VISIONS,
      limit: 8,
      orderBy: PostOrderEnum.PUBLISHED_AT
    },
    {
      getNextPageParam: (lastPage) => lastPage.nextCursor
    }
  );

  const loaderRef = useInfiniteLoad({
    hasNextPage,
    isFetching,
    fetchNextPage
  });

  const items = pages.flatMap((page) =>
    transformPostsToArticleList(page.items)
  );

  if (!items.length) {
    return (
      <section className='relative mx-auto w-full max-w-[1362px] grow p-3 md:p-[30px] xl:border-x'>
        <div className='flex flex-col gap-y-3 xl:flex-row'>
          <div className='shrink-0 xl:w-68'>
            <h2 className='text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl'>
              flere <br />
              visioner
            </h2>
          </div>
          <div className='grid w-full gap-5'>
            <p className='text-lg font-medium'>Ingen visioner fundet</p>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className='relative mx-auto w-full max-w-[1362px] grow p-3 md:p-[30px] xl:border-x'>
      <div className='flex flex-col gap-y-3 border-t pt-3 xl:flex-row xl:pt-5'>
        <div className='shrink-0 xl:w-68'>
          <h2 className='text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl'>
            flere <br />
            visioner
          </h2>
        </div>
        <div className='w-full'>
          <ul className='grid gap-x-5 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 lg:gap-x-10'>
            {items.map((item, index) => {
              return (
                <li
                  key={index}
                  className='animate-fadeInUp relative before:absolute before:bg-gray-200 last:before:hidden sm:before:-right-[10px] sm:before:bottom-0 sm:before:h-full sm:before:w-px sm:max-lg:nth-[2n]:before:hidden lg:before:-right-[20px] lg:nth-[4n]:before:hidden'
                >
                  <VisionItem data={item} />
                </li>
              );
            })}
          </ul>
          {isFetching && (
            <Loader2 className='mx-auto mt-8 size-10 animate-spin' />
          )}

          {hasNextPage ? (
            <div ref={loaderRef} className='mt-8 size-4' />
          ) : (
            <p className='mt-8 text-center'>Ingen flere varer</p>
          )}
        </div>
      </div>
    </section>
  );
}