<script>
    import { getCountBuses } from "$/services/lineas";
    import { createEventDispatcher, onMount } from "svelte";
    const dispatch = createEventDispatcher();

    let canvasChart = null;
    let data = [];

    onMount(async () => {
        // @ts-ignore
        const { Chart, theme } = globalThis || {};

        dispatch("loading", true);
        const result = await getCountBuses();
        data = result.sort((a, b) =>
            a.route_short_name < b.route_short_name ? -1 : 1,
        );

        const resumen = [];
        for (const row of data) {
            const servicio = row.route_short_name.substring(0, 2);
            const elem = resumen.find((el) => el.servicio === servicio) || null;
            if (elem) {
                elem.count += row.count;
            } else {
                resumen.push({ servicio, count: row.count });
            }
        }

        const labels = resumen.map((el) => `Servicio ${el.servicio}`);
        const values = resumen.map((el) => el.count);
        const colors = resumen.map((el, index) => {
            const valor = index % 4;
            if (valor === 0) {
                const color = parseInt(theme.primary.replace("#", "0x"));
                return "#" + Number(color + index * 50).toString(16);
            } else if (valor === 1) {
                const color = parseInt(theme.success.replace("#", "0x"));
                return "#" + Number(color + index * 100).toString(16);
            } else if (valor === 2) {
                const color = parseInt(theme.warning.replace("#", "0x"));
                return "#" + Number(color + index * 150).toString(16);
            } else {
                const color = parseInt("0xdee2e6");
                return "#" + Number(color + index * 200).toString(16);
            }
        });

        dispatch("loading", false);

        new Chart(canvasChart, {
            type: "doughnut",
            data: {
                labels,
                datasets: [
                    {
                        data: values,
                        backgroundColor: colors,
                        // borderColor: "transparent",
                        borderWidth: 2,
                    },
                ],
            },
            options: {
                responsive: true,
                aspectRatio: 1,
                maintainAspectRatio: true,
                cutoutPercentage: 30,
                legend: { display: false },
            },
        });
    });
</script>

<div class="card flex-fill w-100">
    <div class="card-header">
        <h5 class="card-title mb-0">Buses en recorrido por Ruta</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-6 d-flex align-items-center">
                <div class="chart chart-sm">
                    <canvas bind:this={canvasChart}></canvas>
                </div>
            </div>
            <div class="col-6">
                <div class="table-responsive border" style="max-height: 400px;">
                    <table class="table mb-0 table-hover">
                        <tbody>
                            {#each data as row}
                                <tr>
                                    <td>{row.route_short_name}</td>
                                    <td class="text-end">{row.count}</td>
                                </tr>
                            {/each}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
