<script lang="ts">
    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
    import PublicacionPropiedad from "../Componentes/PublicacionPropiedad.svelte";
    import PanelBusqueda from "../Componentes/PanelBusqueda.svelte";
    import VolverArriba from "../Componentes/BotonVolverArriba.svelte";
    import { onMount } from "svelte";
    import { fade } from "svelte/transition";
    import {urlG} from "../stores/urlStore"
    
    let showButton = $state(false);

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

    const handleScroll = () => {
        showButton = window.scrollY > 100;
    };

    onMount(() => {
        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    });

    function cargaPropiedades(e:Event){
        e.preventDefault();
        const response = fetch(String($urlG)+"/api/busqueda", {
            method: "GET",
            headers: {
                "Auth": String(token),
            }
        });
    }
</script>

<NavBarAutocompletable/>

<div class="container mt-4">
    <div class="row">
        <div class="col col-md-8 order-2">
            <PublicacionPropiedad ubicacion="test" servicios="test" />
            <br>
            <PublicacionPropiedad ubicacion="test" servicios="test" />
            <br>
            <PublicacionPropiedad ubicacion="test" servicios="test" />
            <br>
            <PublicacionPropiedad ubicacion="test" servicios="test" />
            <br>
            <PublicacionPropiedad ubicacion="test" servicios="test" />
            <br>
            <PublicacionPropiedad ubicacion="test" servicios="test" />
            <br>
            <PublicacionPropiedad ubicacion="test" servicios="test" />
            <br>
            <PublicacionPropiedad ubicacion="test" servicios="test" />
            <br>
            <PublicacionPropiedad ubicacion="test" servicios="test" />
            <br>
            <PublicacionPropiedad ubicacion="test" servicios="test" />
            <br>
            <PublicacionPropiedad ubicacion="test" servicios="test" />
            <br>
            <PublicacionPropiedad ubicacion="test" servicios="test" />
            <br>
            <PublicacionPropiedad ubicacion="test" servicios="test" />
            <br>
            <PublicacionPropiedad ubicacion="test" servicios="test" />
            <br>
        </div>
        <div class="col-md-4 order-1">
            <PanelBusqueda/>
            <br>
        </div>
    </div>
    {#if showButton }
    <div transition:fade={{duration:100}}>
        <VolverArriba/>
    </div>
    {/if}
</div>
