const Dropdown = ({ onEnterpriseChange, selectedValue }) => {
    // Desestructuramos del objeto global React
    const [enterprises, setEnterprises] = React.useState([]);
    const [loading, setLoading] = React.useState(true);
    const [selected, setSelected] = React.useState(selectedValue || '-1');

    React.useEffect(() => {
        let isMounted = true;

        const fetchEnterprises = async () => {
            try {
                const response = await fetch('/global/getEnterprise', { method: 'POST' });
                const data = await response.json();

                if (isMounted && data) {
                    setEnterprises(data);
                    setLoading(false);

                    // Si hay empresas y no hay una seleccionada previa, notifica la primera por defecto
                    if (data.length > 0 && (!selectedValue || selectedValue === '-1')) {
                        const firstEntId = data[0].enterpriseID;
                        setSelected(firstEntId);

                        // Notifica al padre si recibió el callback
                        if (onEnterpriseChange) {
                            onEnterpriseChange(firstEntId);
                        }
                    }
                }
            } catch (error) {
                console.error('Error cargando empresas en Dropdown:', error);
                if (isMounted) setLoading(false);
            }
        };

        fetchEnterprises();

        return () => {
            isMounted = false; // Cleanup para evitar fugas de memoria
        };
    }, []);

    const handleChange = (e) => {
        const newEntId = e.target.value;
        setSelected(newEntId);

        // Envía el ID seleccionado al componente padre (Catalog)
        if (onEnterpriseChange) {
            onEnterpriseChange(newEntId);
        }
    };

    return (
        <div className="form-group mb-0">
            <select
                className="form-control form-select"
                value={selected}
                onChange={handleChange}
                disabled={loading}
            >
                <option value="-1">Elija una opción</option>
                {enterprises.map((ent) => (
                    <option key={ent.enterpriseID} value={ent.enterpriseID}>
                        {ent.enterpriseName}
                    </option>
                ))}
            </select>
        </div>
    );
};