<script lang="ts">
    import { onMount } from "svelte";
    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
    import type { GrupoDto } from "../types";
    import { urlG } from "../stores/urlStore";

    const token: string = sessionStorage.getItem("token") || "";

    let grupos: GrupoDto[] = $state([]);
    let modaldat: string = $state("");
    onMount(() => {
        ObtenerGrupos();
    });
    async function ObtenerGrupos() {
        try {
            const ret = await fetch($urlG + "/api/admin/grupos", {
                method: "GET",
                headers: {
                    Auth: token,
                },
            });
            if (!ret.ok) {
                modaldat = "Fallo Al intentar hacer la request";
                return;
            }
            grupos = await ret.json();
        } catch {
            modaldat = "Fallo Al intentar hacer la request";
        }
    }
</script>

<NavBarAutocompletable />
<div class="container-fluid">
    {#if grupos.length == 0}
        <div class="text-center">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    {:else}
        {#each grupos as grupo}
            <div class="accordion mt-2">
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button
                            class="accordion-button collapsed"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target={`#${grupo.idgrupo}`}
                            aria-expanded="false"
                            aria-controls={grupo.idgrupo}
                        >
                            {grupo.nombre}
                        </button>
                    </h2>
                    <div id={grupo.idgrupo} class="accordion-collapse collapse">
                        <div class="accordion-body">
                            <div class="row">
                                <div class="col-6">
                                    <h5>Grupos Incluidos</h5>
                                    <ul class="list-group">
                                        {#if grupo.gruposIncluidos.length == 0}
                                            <li class="list-group-item">
                                                No hay grupos incluidos
                                            </li>
                                        {:else}
                                            {#each grupo.gruposIncluidos as grupoIncluido}
                                                <li class="list-group-item">
                                                    {grupoIncluido}
                                                </li>
                                            {/each}
                                        {/if}
                                    </ul>
                                </div>
                                <div class="col-6">
                                    <h5>Permisos</h5>
                                    <ul class="list-group">
                                        {#if grupo.permisos.length == 0}
                                            <li class="list-group-item">
                                                No hay grupos incluidos
                                            </li>
                                        {:else}
                                            {#each grupo.permisos as permiso}
                                                <li class="list-group-item">
                                                    {permiso.descripcion}
                                                </li>
                                            {/each}
                                        {/if}
                                    </ul>
                                </div>
                            </div>
                            <hr />
                            <div class="d-flex justify-content-between">
                                <button class="btn btn-primary">Editar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {/each}
    {/if}
</div>
