<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"
    import type { PropiedadDto } from "../types";
    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
    import { text } from "@sveltejs/kit";


    let showButton = $state(false);
    let propiedades: PropiedadDto[] = $state([]);

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

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

    onMount(() => {
        checkparametros()?
            busqueda():
            cargaPropiedades();

        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    });
    
    function checkparametros(){
        const params = new URLSearchParams(window.location.search);

        if (params.has('cantidadHabitaciones') && params.has('tipoPropiedad')
            && params.has('servicios') ) {
            return true;
        }
        return false
    }
    async function cargaPropiedades(){
        const response = await fetch(String($urlG)+"/api/propiedades", {
            method: "GET",
            headers: {
                "Auth": String(token),
            }
        });
        if (response.ok){
            propiedades = await response.json();
        }
    }
    async function busqueda(){
        const params = new URLSearchParams(window.location.search);
        let hab = params.get('cantidadHabitaciones');
        let tipo = params.get('tipoPropiedad');
        let serv = params.get('servicios');

        const response = await fetch(String($urlG)+"/api/busqueda"+"?cantidadHabitaciones="+hab+
        "&tipoPropiedad="+tipo+"&servicios="+serv, {
            method: "GET",
            headers: {
                "Auth": String(token),
            }
        });
        if (response.ok){
            propiedades = await response.json();
        }
    }
</script>

<NavBarAutocompletable/>

<div class="container mt-4">
    <BarraHorizontalConTexto text="Busqueda Propiedades"/>
    <div class="row">
        <div class="col col-md-8 order-2">
        {#each propiedades as item}
            <PublicacionPropiedad prop={item} />
            <br>
        {/each}
        </div>
        <div class="col-md-4 order-1">
            <PanelBusqueda/>
            <br>
        </div>
    </div>
    {#if showButton }
    <div transition:fade={{duration:100}}>
        <VolverArriba/>
    </div>
    {/if}
</div>
