import ComboBoxInput from '@/Components/ComboBoxInput';
import { City } from '@/types';
import axios from 'axios';
import { useState } from 'react';

interface CitySelectInputProps {
    value: City | null;
    onChange: (city: City | null) => void;
    readOnly?: boolean;
}

export default function CitySelectInput({
    value,
    onChange,
    readOnly = false,
}: CitySelectInputProps) {
    const [availableCities, setAvailableCities] = useState<City[]>([]);

    const fetchCities = async (search: string) => {
        try {
            const response = await axios.get(route('search-cities'), {
                params: { search },
            });
            setAvailableCities(response.data);
        } catch (error) {
            console.error('Error fetching items:', error);
        }
    };

    return (
        <ComboBoxInput
            value={value}
            options={availableCities}
            readOnly={readOnly}
            renderOption={(city) => `${city.name} (${city.state.name})`}
            onChange={onChange}
            onSearchChange={fetchCities}
        />
    );
}