'use client';

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

export default function OpinionList() {
  const {
    data: { pages = [] } = {},
    isFetching,
    fetchNextPage,
    hasNextPage
  } = api.posts.paginate.useInfiniteQuery(
    {
      with: ['author'],
      topic: TopicsEnum.OPINION,
      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 (
      <div className='my-6'>
        <p className='text-lg font-medium'>Ingen opinion fundet</p>
      </div>
    );
  }

  return (
    <div>
      <ul className='grid gap-x-[40px] gap-y-5 lg:grid-cols-4'>
        {items?.map((item, index) => (
          <li
            key={index}
            className='border-style border-t pt-5 first:border-none first:pt-0 nth-[4n]:before:hidden lg:border-none lg:pt-0'
          >
            <OpinionItem data={item} type='small' />
          </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>
  );
}