import { useQuery } from '@/features/query/react-query';
import {
  CitySelector as CitySelectorView,
  type CityOption,
  type CitySelectorProps as CitySelectorViewProps,
} from '@/components/ui/domain/CitySelector/CitySelector';
import { useLocale } from '@/lib/i18n/react';

interface CitiesApiResponse {
  cities: CityOption[];
}

async function fetchCities(): Promise<CityOption[]> {
  const res = await fetch('/api/cities?v=2');
  if (!res.ok) throw new Error(`cities fetch ${res.status}`);
  const data = (await res.json()) as CitiesApiResponse;
  return data.cities;
}

export type CitySelectorProps = Omit<CitySelectorViewProps, 'cities'>;

export function CitySelector(props: CitySelectorProps) {
  const { locale } = useLocale();
  const { data: cities = [] } = useQuery<CityOption[]>({
    queryKey: ['cities', locale],
    queryFn: fetchCities,
    staleTime: 1000 * 60 * 60,
  });

  return <CitySelectorView {...props} cities={cities} />;
}