'use client';

import { api } from '@/lib/trpc/client';
import { PollOrderBy } from '@/server/modules/poll/types/poll-order-by.enum';
import { ClipboardCheck, Loader2 } from 'lucide-react';
import { cn } from '@/lib/utils';
import useInfiniteLoad from '@/hooks/use-infinite-load';

export default function PollPicker({
  selectPollId,
  handleSelectPollId,
  className
}: {
  selectPollId: string | null;
  handleSelectPollId: (pollId: string | null) => void;
  className?: string;
}) {
  const {
    data: { pages = [] } = {},
    isFetching,
    fetchNextPage,
    hasNextPage
  } = api.poll.paginate.useInfiniteQuery(
    {
      with: ['questions'],
      orderBy: PollOrderBy.CREATED_AT,
      limit: 12
    },
    {
      getNextPageParam: (lastPage) => lastPage.nextCursor
    }
  );

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

  const items = pages.flatMap((page) => page.items) ?? [];

  return (
    <div>
      <div
        className={cn(
          'grid min-h-30 grid-cols-4 gap-3 overflow-y-auto',
          className
        )}
      >
        {items.map((item, index) => {
          const isSelected = item.id === selectPollId;
          return (
            <button
              role='button'
              key={index}
              className={cn(
                'max-s-26 bg-muted relative size-full min-h-24 overflow-hidden rounded p-1',
                isSelected && 'border border-dashed border-black'
              )}
              onClick={() => handleSelectPollId(isSelected ? null : item.id)}
            >
              <ClipboardCheck
                className='absolute inset-0 z-0 m-auto size-full stroke-neutral-200'
                aria-hidden
              />
              <span className='relative line-clamp-4 font-medium'>
                {item.title}
              </span>
            </button>
          );
        })}
        <div className='col-span-4'>
          {isFetching && (
            <Loader2 className='mx-auto mt-8 size-10 animate-spin' />
          )}

          {hasNextPage && (
            <div
              ref={loaderRef}
              className='mt-8 size-4'
              id='next-page-loader'
            />
          )}
        </div>
      </div>
    </div>
  );
}