'use client';

import Image from 'next/image';
import Link from 'next/link';
import SortChip from './sort-chip';
import SortSelect from './sort-select';
import { Suspense } from 'react';
import { api } from '@/lib/trpc/client';
import useInfiniteLoad from '@/hooks/use-infinite-load';
import { Loader2 } from 'lucide-react';
import { CityChangeSortEnum } from '@/config/enums/city-change.enum';
import { ImageQuality } from '@/config/enums/image-quality';

const options = [
  {
    sort: CityChangeSortEnum.DATE,
    name: 'Dato'
  },
  {
    sort: CityChangeSortEnum.RATE,
    name: 'Populære'
  },
  {
    sort: CityChangeSortEnum.VOTE,
    name: 'Stemmer'
  },
  {
    sort: CityChangeSortEnum.COMMENT,
    name: 'Kommentarer'
  }
];

export default function CityChangeList({
  filters
}: {
  filters: Record<string, string> | undefined;
}) {
  const {
    data: { pages = [] } = {},
    isFetching,
    fetchNextPage,
    hasNextPage
  } = api.citychange.paginate.useInfiniteQuery(
    {
      filters
    },
    {
      getNextPageParam: (lastPage) => lastPage.nextCursor,
      initialCursor: 1
    }
  );

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

  const totalCount = pages[0]?.total ?? 0;
  const proposals = pages.flatMap((page) => page.items) ?? [];

  return (
    <div className='overflow-hidden'>
      <header className='bg-[#1C3A4F] text-[#DFE4F0]'>
        <div className='border-b border-b-[#79878D] p-4'>
          {isFetching ? (
            <Loader2 className='inline size-4 animate-spin' />
          ) : (
            totalCount
          )}{' '}
          forslag
        </div>
        <div className='flex flex-wrap items-center justify-between gap-x-4 px-4 py-6 text-xs md:items-center'>
          <span className='mr-2 text-sm font-semibold tracking-[0.14em] text-[#A9B8C6] uppercase'>
            Sortér efter
          </span>
          <Suspense>
            <div className='hidden gap-6 md:flex'>
              {options.map((item, index) => (
                <SortChip data={item} key={index} />
              ))}
            </div>

            <div className='md:hidden'>
              <SortSelect data={options} />
            </div>
          </Suspense>
        </div>
      </header>

      <ul>
        {proposals.map((proposal) => (
          <li
            key={proposal.id}
            className='m-4 grid min-h-60 grid-cols-1 gap-y-4 border-b border-[#223840] transition md:m-0 md:grid-cols-[168px_1fr_240px] md:bg-[#F6F6F6] lg:gap-y-6'
          >
            <div className='bg-client-yellow order-2 flex flex-col gap-1 px-4 py-8 text-sm font-semibold text-[#1C3A4F] md:order-1'>
              <svg
                xmlns='http://www.w3.org/2000/svg'
                width='19.944'
                height='23.904'
                viewBox='0 0 19.944 23.904'
              >
                <g
                  id='Group_65'
                  data-name='Group 65'
                  transform='translate(-773.018 -650)'
                >
                  <g id='cc-logo-no_text' transform='translate(773.018 650)'>
                    <g
                      id='Group_66'
                      data-name='Group 66'
                      transform='translate(0 0)'
                    >
                      <path
                        id='Path_7'
                        data-name='Path 7'
                        d='M135.7,117.692a3.256,3.256,0,1,1,3.256-3.256A3.257,3.257,0,0,1,135.7,117.692Z'
                        transform='translate(-125.592 -104.299)'
                        fill='#223840'
                      />
                      <g id='Group_191' data-name='Group 191'>
                        <path
                          id='Path_6'
                          data-name='Path 6'
                          d='M64.064,42.492a9.986,9.986,0,0,1,17.05,7.078,9.615,9.615,0,0,1-2.576,6.7.475.475,0,0,1-.775.029l-3.275-3.353a.333.333,0,0,1,0-.523,4.168,4.168,0,0,0,1.069-2.834,3.836,3.836,0,0,0-1.269-2.938,4.331,4.331,0,0,0-3.053-1.174,4.189,4.189,0,0,0-3.011,1.187,3.9,3.9,0,0,0-1.248,2.947,4.186,4.186,0,0,0,1.008,2.813.347.347,0,0,1-.02.543l-3.358,3.362a.47.47,0,0,1-.748-.029,9.31,9.31,0,0,1-2.688-6.732,9.9,9.9,0,0,1,2.9-7.078Z'
                          transform='translate(-61.17 -39.57)'
                          fill='#223840'
                        />
                        <path
                          id='Path_8'
                          data-name='Path 8'
                          d='M109.131,195.043a.4.4,0,0,1-.563,0l-5.66-5.66a.4.4,0,0,1,0-.563l3.427-3.428a.4.4,0,0,1,.563,0l1.669,1.669a.4.4,0,0,0,.563,0l1.692-1.692a.4.4,0,0,1,.563,0l3.428,3.427a.4.4,0,0,1,0,.563l-5.684,5.685Z'
                          transform='translate(-98.793 -171.254)'
                          fill='#223840'
                        />
                      </g>
                    </g>
                  </g>
                </g>
              </svg>
              <span>{proposal.address.street}</span>
            </div>

            <Link
              href={proposal.url}
              className='group order-3 pb-6 text-[#1C3A4F] md:order-2 md:p-4'
            >
              <div className='space-y-2'>
                <span className='text-sm text-[#6C6C6C]'>{proposal.slug}</span>
                <h3 className='text-xl leading-tight font-semibold text-[#223840] group-hover:underline'>
                  {proposal.title}
                </h3>
              </div>
              <div className='flex flex-col items-baseline gap-x-8 gap-y-3'>
                {!!proposal.rate && (
                  <span className='text-[60px] leading-none font-bold text-[#75AFE5]'>
                    {proposal.rate}%
                  </span>
                )}
                <div className='flex w-full justify-between gap-6 tracking-[0.15em] text-[#6C6C6C] uppercase md:w-auto'>
                  <span>{proposal.votes} stemmer</span>
                  <span>{proposal.comments} kommentarer</span>
                </div>
              </div>
            </Link>
            {!!proposal.image && (
              <div className='relative order-1 overflow-hidden md:order-3 md:p-4'>
                <Image
                  src={proposal.image}
                  alt={proposal.title}
                  width={200}
                  height={200}
                  className='size-full object-cover'
                  quality={ImageQuality.LOW}
                />
              </div>
            )}
          </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>
  );
}