<script>
    import { getRedTransporte } from "$/services/red_transporte";
    import { getGtfsArchivo } from "$/services/gtfs_archivo";
    export let id_red;  
    export let id_archivo; 
    
    export let loading = false;

    
    let redes= []
    let archivos = []
    let redes_archivos = []

    getRedTransporte({ vigente: 1 })
        .then(data => data.sort((a,b) => a.nombre_red < b.nombre_red? -1 : 1))
        .then(data => redes = data)
        .catch(error => globalThis.toast.error(error))
    
    getGtfsArchivo()
        .then(data => data.sort((a,b) => a.archivo < b.archivo? -1 : 1))
        .then(data => redes= data)
        .catch(error => globalThis.toast.error(error))

    function onChangeRed() {
        id_archivo = ''        
        if (!id_archivo) {
            redes_archivos = []
        } else {
            const archivos_filtrados = archivos.filter(el => el.id_red === id_red);
            const archivos_ordenados = archivos_filtrados.sort((a,b) => a.archivo < b.archivo ? -1 : 1);
            redes_archivos = archivos_ordenados;
        }
    }
  
</script>

<div class="row">
    <div class="col-md">

        <div class="input-group mb-3">
            <div class="input-group-text">Redes de Transporte</div>
            <select bind:value={id_red} class="form-select" on:change={onChangeRed}>
                <option value=""></option>
                {#each redes as rt}
                    <option value={rt.id_red}>{rt.nombre_red}</option>
                {/each}
            </select>
        </div>

        

    </div>
     
</div>
