<script>
    import { getLineas } from "$/services/lineas";
    import { getOperadores } from "$/services/operadores";

    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 = []

    getOperadores({ vigente: 1 })
        .then(data => data.sort((a,b) => a.nombre_operador < b.nombre_operador? -1 : 1))
        .then(data => operadores = data)
        .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);
            const lineas_ordenadas = lineas_filtradas.sort((a,b) => a.route_short_name < b.route_short_name ? -1 : 1);
            lineas_operador = lineas_ordenadas;
        }
    }

    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>
