<script>
    import { getLineas } from "$/services/lineas";
    import { getOperadores } from "$/services/operadores";
    import { onMount } from 'svelte';
    export let id_operador;
    export let id_linea;
    export let codigo;
    export let ver_buses;
    export let ver_paraderos;
    export let loading = false;

    let operadores = []
    let lineas = []
    let lineas_operador = []
    onMount(() => {
        getOperadores({ vigente: 1 })
            .then(data => data.sort((a,b) => a.nombre_operador < b.nombre_operador? -1 : 1))
            //.then(data => operadores = data)
            .then(data => {
                operadores = data;
                if (operadores.length > 0) {
                    id_operador = operadores[0].id_operador;
                    onChangeOperador(); 
                }
            })
            .catch(error => globalThis.toast.error(error))
        
        getLineas({ vigente: 1 })
            .then(data => data.sort((a,b) => a.nombre_linea < b.nombre_linea? -1 : 1))
            .then(data => lineas = data)
            .catch(error => globalThis.toast.error(error))
    });

    function onChangeOperador() {
        id_linea = ''
        ver_paraderos = false
        ver_buses = false
        if (!id_operador) {
            lineas_operador = []
        } else {
            const lineas_filtradas = lineas.filter(el => el.id_operador === id_operador);
            lineas_operador = lineas_filtradas.sort((a,b) => a.route_short_name < b.route_short_name ? -1 : 1);            
            if (lineas_operador.length > 0) {
                id_linea = lineas_operador[0].id_linea; 
                onChangeLinea(); 
            }
        }
    }

    function onChangeLinea() {
        codigo = lineas.find(el => el.id_linea === id_linea)?.route_short_name || null
        ver_paraderos = false
        ver_buses = false
    }
</script>

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

        <div class="input-group mb-3">
            <div class="input-group-text">Operador</div>
            <select bind:value={id_operador} class="form-select" on:change={onChangeOperador}>
                 <option value=""></option> 
                {#each operadores as operador}
                    <option value={operador.id_operador}>{operador.nombre_operador}</option>
                {/each}
            </select>
        </div>

        <div class="input-group mb-3">
            <div class="input-group-text">Linea</div>
            <select bind:value={id_linea} class="form-select" style="font-family: monospace;" on:change={onChangeLinea}>
                 <option value=""></option> 
                {#each lineas_operador as linea}
                    <option value={linea.id_linea}>{@html linea.route_short_name.padEnd(6).replace(/ /g,'&nbsp;')} {linea.route_long_name}</option>
                {/each}
            </select>
        </div>

    </div>
    <div class="col-md-auto">

        <div class="form-check form-switch mb-3">
            <input class="form-check-input" type="checkbox" role="switch" id="check-ver-buses-recorrido"
                disabled={!id_linea}
                bind:checked={ver_buses}>
            <label class="form-check-label" for="check-ver-buses-recorrido">Ver Buses del Recorrido</label>
        </div>

        <div class="form-check form-switch mb-3">
            <input class="form-check-input" type="checkbox" role="switch" id="check-ver-paraderos"
                disabled={!id_linea}
                bind:checked={ver_paraderos}>
            <label class="form-check-label" for="check-ver-paraderos">Ver Paraderos</label>
        </div>

        {#if loading}
            <div class="spinner-grow spinner-grow-sm text-danger" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        {/if}

    </div>
</div>
