<script lang="ts">
    import Header from "./componentes/header.svelte";
    import CalcularDias from "./componentes/paginas/CalcularDias.svelte";
    import CaminoCritico from "./componentes/paginas/CaminoCritico.svelte";
    import IndiceDeControl from "./componentes/paginas/IndiceDeControl.svelte";
    import RelacionesNodos from "./componentes/paginas/RelacionesNodos.svelte";
    import { TablaNodos } from "./componentes/paginas/TablaNodos.svelte";
    import TablaProyect from "./componentes/paginas/TablaProyect.svelte";
    import Tarjeta from "./componentes/tarjeta.svelte";
    import html2canvas from "html2canvas";

    let pagina = $state(0);
    let issues: any[] = $state([]);
    $effect(() => {
        obtener_issues();
    });

    async function obtener_issues() {
        /*
        const req = await fetch(
            "https://fedesrv.ddns.net/redmine/issues.json?key={key}&proyect_id=1&limit=100&status_id=2&tracker_id=1",
        );
        if (req.ok) {
            issues = await req.json();
        }
      */
        const data = await import("./assets/issues.json");
        issues = data.issues;
    }
    async function exportToPNG(issue: any) {
        setTimeout(() => {}, 100);
        const element = document.getElementById(`card-${issue.id}`);

        if (element) {
            const canvas = await html2canvas(element);
            const image = canvas.toDataURL("image/png");
            const link = document.createElement("a");
            link.download = `issue-${issue.id}.png`;
            link.href = image;
            link.click();
        }
        setTimeout(() => {}, 100);
    }
    async function exportAllToPNG(issues: any[]) {
        issues.forEach(async (issue) => {
            const element = document.getElementById(`card-${issue.id}`);

            if (element) {
                const canvas = await html2canvas(element);
                const image = canvas.toDataURL("image/png");
                const link = document.createElement("a");
                link.download = `issue-${issue.id}.png`;
                link.href = image;
                link.click();
            }
        });
    }
</script>

<main>
    <Header bind:pagina></Header>
    {#if pagina == 0}
        <button
            onclick={() => exportAllToPNG(issues)}
            class="btn btn-primary mt-3">Exportar a PNG</button
        >
        {#if issues.length == 0}
            <p>Cargando...</p>
        {:else}
            <div class="d-flex justify-center flex-column align-items-center">
                {#each issues as issue}
                    <div class="m-2 w-75">
                        <Tarjeta {issue} />
                        <!--
                    <button
                        onclick={() => exportToPNG(issue)}
                        class="btn btn-primary mt-3">Exportar a PNG</button
                    >
                    -->
                    </div>
                {/each}
            </div>
        {/if}
    {:else if pagina === 1}
        <CalcularDias issuesp={issues} />
    {:else if pagina === 2}
        <IndiceDeControl {issues} />
    {:else if pagina === 3}
        <TablaProyect {issues} />
    {:else if pagina === 4}
        <RelacionesNodos />
    {:else if pagina === 5}
        <CaminoCritico />
    {/if}
</main>
