<script>
    import Paginate from "../../components/Paginate.svelte";
    import TableResponsive from "../../components/TableResponsive.svelte";
    import { getLineas } from "../../services/lineas";
    import { getOperador, getOperadores } from "../../services/operadores";
    import { createEventDispatcher } from "svelte";
    const dispatch = createEventDispatcher()

    let loading = false;
    let offset = 0;
    const limit = 10;
    let lineas = { results: [], count: 0 };
    let operadores = [];
    let filtro = {}

    async function fetchOperadores() {
        try {
            operadores = await getOperadores({ ordering: 'nombre_operador' })
        } catch (error) {
            alert(error)
        }
    }

    async function fetchData(offset, { id_operador = null }) {
        try {
            loading = true;
            const conditions = { offset, limit, ordering: 'route_short_name' };
            if (id_operador) conditions.id_operador = id_operador;
            lineas = await getLineas(conditions)
        } catch (error) {
            alert(error)
        } finally {
            loading = false
        }
    }

    function getNombreOperador(id) {
        const operador = operadores.find(el => el.id_operador === id) || {}
        return operador.nombre_operador || ''
    }

    function onSelect(linea) {
        const operador = operadores.find(el => el.id_operador === linea.id_operador) || {}
        const data = { linea, operador }
        dispatch('select', data)
    }

    fetchOperadores()
    $: fetchData(offset, filtro)
    $: dispatch('loading',loading)
</script>

<div class="card">
    <div class="card-header">
        <div class="row">
            <div class="col">
                <slot name="buttons" />
            </div>
            <div class="col-auto">
                <div class="input-group">
                    <div class="input-group-text">Operador</div>
                    <select class="form-select" bind:value={filtro.id_operador}>
                        <option value=""></option>
                        {#each operadores as operador}
                            <option value={operador.id_operador}>{operador.nombre_operador}</option>
                        {/each}
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body">
        <TableResponsive>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Operador</th>
                    <th>LUR</th>
                    <th>Dirección</th>
                </tr>
            </thead>
            <tbody>
                {#each lineas.results as linea}
                <tr>
                    <td><a href={"#"} on:click|preventDefault={() => onSelect(linea)}>{linea.id_linea}</a></td>
                    <td>{getNombreOperador(linea.id_operador)}</td>
                    <td>{linea.route_short_name}</td>
                    <td>{linea.route_long_name}</td>
                </tr>
                {/each}
            </tbody>
        </TableResponsive>
    </div>
    <div class="card-footer">
        <Paginate
            forcePage={offset / limit + 1}
            count={lineas.count}
            {limit}
            on:page={ev => offset = (ev.detail - 1) * limit}
        />
    </div>
</div>