<script lang="ts">
    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
    import type { LogDetalleDto, LogDto } from "../types";
    import { onMount } from "svelte";
    import { urlG } from "../stores/urlStore";
    import ModalEstatico from "../Componentes/ModalEstatico.svelte";
    import ModalLogs from "../Componentes/ModalLogs.svelte";
    import PaginacionStepper from "../Componentes/PaginacionStepper.svelte";

    let Logs: LogDto[] = $state([]);
    let pagina:number = $state(1);
    let token:string = sessionStorage.getItem("token")||"";
    let modaldata:string = $state("");
    let showmodal:boolean =$state(false);
    let ll:LogDto|any = $state({});
    let cantpag:number = $state(0);

    onMount(()=>{
        obtenerLogs();
        obtenerPaginas();
    });

    async function obtenerPaginas() {
        try{
            const r = await fetch($urlG+"/api/Logs/cantPag", {
                method: "GET",
                headers: {
                    "Auth": token,
                }
            });
            let data = await r.json();
            if (r.ok) {
                cantpag = data;
                return;
            }
            modaldata = data.message;
        } catch {
            modaldata = "no se pudo hacer la request";
        }
    }

    async function obtenerLogs() {
        try{
            const r = await fetch($urlG+"/api/Logs?pag="+pagina, {
                method: "GET",
                headers: {
                    "Auth": token,
                }
            });
            let data = await r.json();
            if (r.ok) {
                Logs = data;
                return;
            }
            modaldata = data.message;
        } catch {
            modaldata = "no se pudo hacer la request";
        }
    }

    function prepararModal(l: LogDto) {
        ll = l;
        showmodal = true;
    }
    function queryPag(a:number) {
        pagina = a;
        obtenerLogs();
    }
</script>

<NavBarAutocompletable/>

{#if modaldata}
    <ModalEstatico payload={modaldata} close={()=>!!(modaldata = "")}/>
{/if}

{#if showmodal}
    <ModalLogs onClose={()=>!!(showmodal=!showmodal)} log={ll}/>
{/if}

<div class="container-fluid mt-2">
    <BarraHorizontalConTexto text={"Logs"}/>
    <table class="table table-responsive table-hover table-striped">
        <thead>
            <tr>
                <th>Fecha</th>
                <th>Id Usuario</th>
                <th>Accion</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        {#each Logs as l}
            <tr>
                <td>{l.fecha}</td>
                <td>{l.dniusuario}</td>
                <td>{l.accion}</td>
                <td>
                    <button class="btn btn-primary" onclick={()=>prepararModal(l)}>
                        Ver
                    </button>
                </td>
            </tr>
        {/each}
        </tbody>
    </table>
    <div class="d-flex justify-content-center">
        <PaginacionStepper currentPag={pagina} {cantpag} {queryPag}/>
    </div>
</div>
