<script lang="ts">
    import { onMount } from "svelte";
    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
    import PanelBusqueda from "../Componentes/AdminPanelBusqueda.svelte";
    import BotonVolverArriba from "../Componentes/BotonVolverArriba.svelte";
    import ModalEstatico from "../Componentes/ModalEstatico.svelte";
    import { fade } from "svelte/transition";
    import type { AdminParametrosBusqueda, PropiedadAdmin, PropiedadDto } from "../types";
    import {urlG} from "../stores/urlStore";
    import AdminPropiedad from "../Componentes/AdminPropiedad.svelte";
    import PaginacionStepper from "../Componentes/PaginacionStepper.svelte";
    

    const token = sessionStorage.getItem("token");

    let showButton: boolean = $state(false);
    let modaldata: string = $state("");
    let cantpag:number = $state(1);
    let Propiedades:PropiedadAdmin[] = $state([]);

    let p: AdminParametrosBusqueda = $state({
        cantidadhabitaciones: 0,
        pag: 1,
        servicios: "",
        tipopropiedad: 0,
    });
    
    
    onMount(() => {    
        cargaPropiedades();
        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);

    });

    const handleScroll = () => {
        showButton = window.scrollY > 100;
    };
    
    async function cargaPropiedades() {
        try{
            const [response, response2] = await Promise.all([
                fetch($urlG+"/api/admin/busqueda/paginada?cantidadHabitaciones="+p.cantidadhabitaciones+"&tipoPropiedad="+p.tipopropiedad+"&servicios="+p.servicios+"&pag="+p.pag, {
                    method: "GET",
                    headers: {
                        "Auth": String(token)
                    }
                }),
                fetch($urlG+"/api/admin/busqueda/cantPag?cantidadHabitaciones="+p.cantidadhabitaciones+"&tipoPropiedad="+p.tipopropiedad+"&servicios="+p.servicios, {
                    method: "GET",
                    headers: {
                        "Auth": String(token)
                    }
                })
            ]);
            
            if (response.ok && response2.ok) {
                const [data, data2] = await Promise.all([response.json(),response2.json()]);
                Propiedades = data;
                cantpag = data2.message;
                return;
            }
            modaldata = "Fallo la request";
        }catch {
            modaldata = "Fallo al intentar obtener la lista de propiedades"; 
        }
    }

    function queryPag(a:number){
        p.pag = a;
        cargaPropiedades();
    }
    function querybusc(a:AdminParametrosBusqueda) {
        p = a;
        cargaPropiedades();
    }
</script>

<NavBarAutocompletable/>

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

<div class="container mt-4">
    <BarraHorizontalConTexto text="Administracion Propiedades"/>
    <div class="row">
        <div class="col col-md-8 order-2">
            {#each Propiedades as p }
            <AdminPropiedad prop={p} modal={(a:string)=> modaldata = a} />
            <br>
            {/each}
            <PaginacionStepper currentPag={p.pag} {queryPag} {cantpag}/>
        </div>
        <div class="col col-md-4 order-1">
            <PanelBusqueda Params={querybusc} />
        </div>
    </div>
</div>

{#if showButton }
<div transition:fade={{duration:100}}>
    <BotonVolverArriba/>
</div>
{/if}