'use client';

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';
import { CityChangeOrderEnum } from '@/config/enums/city-change.enum';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { Fragment, useMemo } from 'react';

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

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

  const onSelect = (val: string) => {
    router.replace(val === 'reset' ? pathname : val, { scroll: false });
  };

  return (
    <Select onValueChange={onSelect} value={selectedItem}>
      <SelectTrigger className='border-client-yellow bg-client-yellow w-40 text-[#314A5E] lowercase [&>svg]:!text-[#314A5E] [&>svg]:!opacity-100'>
        <SelectValue placeholder='vælg sort' />
      </SelectTrigger>
      <SelectContent className='border-client-yellow bg-client-yellow'>
        <SelectGroup>
          {data.map((item, index) => (
            <Fragment key={index}>
              <SelectItem
                value={`?sort=${item.sort}&order=${CityChangeOrderEnum.ASC}`}
                className='lowercase'
              >
                {item.name} | nye
              </SelectItem>
              <SelectItem
                value={`?sort=${item.sort}&order=${CityChangeOrderEnum.DESC}`}
                className='lowercase'
              >
                {item.name} | gammel
              </SelectItem>
            </Fragment>
          ))}
          <SelectItem value='reset' className='text-red-600'>
            nulstil
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}