'use client';

import { Fragment } from 'react';
import { useSearchParams } from 'next/navigation';
import { Loader2 } from 'lucide-react';
import { api } from '@/lib/trpc/client';
import {
  ArticleList,
  transformPostsToArticleList
} from '@/features/posts/_lib/transformers';
import DynamicArticle from '@/components/shared/articles/dynamic-article';
import useInfiniteLoad from '@/hooks/use-infinite-load';
import { PostOrderEnum } from '@/config/enums';

export default function SearchList() {
  const search = useSearchParams();
  const {
    data: { pages = [] } = {},
    isFetching,
    fetchNextPage,
    hasNextPage
  } = api.posts.paginate.useInfiniteQuery(
    {
      with: ['project', 'tags', 'review', 'primaryTag', 'author', 'vision'],
      search: search.get('s') as string,
      limit: 12,
      orderBy: PostOrderEnum.PUBLISHED_AT
    },
    {
      getNextPageParam: (lastPage) => lastPage.nextCursor
    }
  );

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

  const viewList = (data: ArticleList) => {
    return data.map((item, index) => {
      const isLastInRowSm = (index + 1) % 2 === 0;
      const isLastInRowLg = (index + 1) % 4 === 0;
      const isLastItem = index === data.length - 1;

      return (
        <Fragment key={item.id}>
          <li
            key={index}
            className={`relative before:absolute before:bottom-0 before:hidden before:h-full before:w-px before:bg-neutral-200 sm:before:-right-[10px] sm:before:block lg:before:-right-[20px] ${isLastItem ? 'before:hidden' : ''} ${isLastInRowSm ? 'sm:max-lg:before:hidden' : ''} ${isLastInRowLg ? 'lg:before:hidden' : ''}`}
          >
            <DynamicArticle data={item} />
          </li>
          {(index + 1) % 4 === 0 && index < data.length - 1 && (
            <li
              aria-hidden
              className='col-span-full hidden border-t border-neutral-200 sm:block'
            ></li>
          )}
        </Fragment>
      );
    });
  };

  if (!pages.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'></div>
          <div className='grid w-full gap-5'>
            <p className='text-lg font-medium'>Intet 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 pt-3 xl:flex-row xl:pt-5'>
        <div className='shrink-0 xl:w-68'></div>
        <div className='w-full'>
          <ul className='grid gap-x-5 gap-y-5 sm:grid-cols-2 lg:grid-cols-4 lg:gap-x-10'>
            {pages.map((page) =>
              viewList(transformPostsToArticleList(page.items))
            )}
          </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>
  );
}