<script>
    import IconLoading from "../../components/IconLoading.svelte";
    import { getLinea } from "../../services/lineas";
    import { getOperador } from "../../services/operadores";
    import { getLineasParadero } from "../../services/paraderos";

    export let parada = null;
    let servicios = [];
    let loading = false;

    async function fetchData({ id_paradero = null }) {
        try {
            if (!id_paradero) return;
            loading = true;
            const resultado = await getLineasParadero(id_paradero);

            const lineas = await Promise.all(
                resultado.map(({ id_linea }) => getLinea(id_linea)),
            );
            const id_operadores = [
                ...new Set(lineas.map((linea) => linea.id_operador)),
            ];

            const operadores = await Promise.all(
                id_operadores.filter(id_operador => id_operador !== null).map((id_operador) => getOperador(id_operador)),
            );

            servicios = resultado.map((el) => {
                const { id_paradero_linea, id_linea } = el;
                const linea =
                    lineas.find((el) => id_linea === el.id_linea) || {};
                const { nombre_operador } =
                    operadores.find(
                        (op) => op.id_operador === linea.id_operador,
                    ) || {};
                return { id_paradero_linea, ...linea, nombre_operador };
            });
        } catch (error) {
            console.log({ error });
        } finally {
            loading = false;
        }
    }

    $: fetchData(parada);
</script>

<div>
    <h4 class="mb-3">Servicios</h4>

    <div class="p-3 bg-white">
        {#if loading}
            <div>
                <IconLoading />
                Cargando información
            </div>
        {/if}

        <ul class="list-group">
            {#each servicios as servicio}
                <li class="list-group-item d-flex justify-content-between align-items-start">
                    <div class="ms-2 me-auto">
                        <div class="fw-bold">{servicio.nombre_operador}</div>
                        Destino: {servicio.route_long_name}
                    </div>
                    <span class="badge bg-primary rounded-pill">{servicio.route_short_name}</span>
                </li>
            {/each}
        </ul>
    </div>
</div>
