// src/features/legislativas/nacionales/components/MunicipioSearch.tsx
import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import Select, { type SingleValue } from 'react-select';
import { getMunicipiosPorDistrito } from '../../../../apiService';
import type { CatalogoItem } from '../../../../types/types';
// 1. Importamos el archivo de estilos como un módulo CSS
import styles from '../PanelNacional.module.css';

interface MunicipioSearchProps {
    distritoId: string;
    onMunicipioSelect: (municipioId: string, municipioNombre: string) => void;
}

interface OptionType {
    value: string;
    label: string;
}

// 2. Definimos los estilos custom para react-select.
//    Ya no son necesarios aquí porque los definimos en el CSS module.
//    const customSelectStyles: StylesConfig<OptionType, false> = { ... };

export const MunicipioSearch = ({ distritoId, onMunicipioSelect }: MunicipioSearchProps) => {
    const [selectedOption, setSelectedOption] = useState<SingleValue<OptionType>>(null);

    const { data: municipios = [], isLoading } = useQuery<CatalogoItem[]>({
        queryKey: ['municipiosPorDistrito', distritoId],
        queryFn: () => getMunicipiosPorDistrito(distritoId),
        enabled: !!distritoId,
    });

    const options: OptionType[] = municipios.map(m => ({
        value: m.id,
        label: m.nombre
    }));

    const handleChange = (selected: SingleValue<OptionType>) => {
        if (selected) {
            onMunicipioSelect(selected.value, selected.label);
            setSelectedOption(null); 
        }
    };

    // 3. Aplicamos la clase del módulo al contenedor principal
    //    y usamos el classNamePrefix para que react-select genere clases
    //    que podamos estilizar desde el CSS module.
    return (
        <div className={styles.municipioSearchContainer}>
            <Select
                options={options}
                onChange={handleChange}
                value={selectedOption}
                isLoading={isLoading}
                placeholder="Buscar municipio..."
                isClearable
                isSearchable
                // El prefijo se mantiene igual al del selector de categorías.
                // Esto nos permite reutilizar los mismos estilos :global que ya definimos.
                classNamePrefix="categoriaSelector"
                noOptionsMessage={() => 'No se encontraron municipios'}
            />
        </div>
    );
};