'use client';
import { CityChangeOrderEnum } from '@/config/enums/city-change.enum';
import { cn } from '@/lib/utils/cn';
import { ArrowDown, ArrowUp } from 'lucide-react';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useCallback } from 'react';

export default function SortChip({ data }: { data: Record<string, string> }) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const selectedItem = useCallback(
    (order: CityChangeOrderEnum) => {
      const sortQuery = searchParams?.get('sort');
      const orderQuery = searchParams?.get('order');
      return data.sort === sortQuery && orderQuery === order;
    },
    [searchParams, data]
  );

  const onSortClick = useCallback(
    (order: CityChangeOrderEnum) => {
      const sortQuery = searchParams?.get('sort');
      const orderQuery = searchParams?.get('order');
      if (data.sort === sortQuery && order === orderQuery) {
        router.replace(pathname, { scroll: false });
      } else {
        router.replace(`?sort=${data.sort}&order=${order}`, { scroll: false });
      }
    },
    [searchParams, data, router, pathname]
  );

  return (
    <div className='flex w-full items-center justify-between gap-3 text-sm tracking-[0.14em] text-[#DFE4F0] md:w-auto md:justify-start'>
      <span>{data.name}</span>
      <div className='flex gap-1'>
        <button
          onClick={() => onSortClick(CityChangeOrderEnum.ASC)}
          className={cn(
            'flex size-8 items-center justify-center rounded-full border border-[#314A5E] bg-white text-[#DFE4F0] transition hover:bg-[#EFD671]',
            selectedItem(CityChangeOrderEnum.ASC) && 'bg-client-yellow'
          )}
        >
          <ArrowDown className='size-4 stroke-[#1C3A4F]' />
        </button>
        <button
          onClick={() => onSortClick(CityChangeOrderEnum.DESC)}
          className={cn(
            'flex size-8 items-center justify-center rounded-full border border-[#314A5E] bg-white text-[#DFE4F0] transition hover:bg-[#EFD671]',
            selectedItem(CityChangeOrderEnum.DESC) && 'bg-client-yellow'
          )}
        >
          <ArrowUp className='size-4 stroke-[#1C3A4F]' />
        </button>
      </div>
    </div>
  );
}