<script lang="ts">
    import { onMount } from "svelte";
    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
    import ModalEstatico from "../Componentes/ModalEstatico.svelte";
    import {urlG} from "../stores/urlStore";
    import type { ContratoDto } from "../types";
    import BotonVolverArriba from "../Componentes/BotonVolverArriba.svelte";
    import { fade } from "svelte/transition";
    import { navigate } from "svelte-routing";

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

    let alquileres: ContratoDto[] = $state([]);
    let modaldata:string = $state("");
    let showButton:boolean = $state(false);

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

    const handleScroll = () => {
        showButton = window.scrollY > 100;
    };
    async function recuperarContratos() {
        try{
            const responce = await fetch($urlG+"/api/contratos/inquilino", {
                method: "GET",
                headers: {
                    "Auth": String(token),
                },
            });
            if (responce.ok){
                let data = await responce.json();
                alquileres = data;
                return;
            }

            let data = await responce.json();
            modaldata = data.message;

        }catch{
            modaldata = "fallo al intentar hacer la request";
        }
    }

</script>

<NavBarAutocompletable/>

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

<div class="container-fluid">
    <BarraHorizontalConTexto text="Control Alquileres" />

    <div class="row g-3">
        {#each alquileres as alquiler}
        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0 text-center">{alquiler.tipoPropiedad}</h5>
                </div>
                <div class="card-body">
                    <h6 class="card-subtitle mb-2 text-muted">{alquiler.ubicacion}</h6>
                    <p class="card-text">
                        <strong>Fecha de inicio:</strong> {new Date(alquiler.fechainicio).toLocaleDateString()}<br />
                        <strong>Inquilino:</strong> {alquiler.inquilino}<br />
                        <strong>Propietario:</strong> {alquiler.propietario}<br>
                        <strong>Id Propiedad: </strong>{alquiler.id}
                    </p>
                    <div class="d-flex justify-content-center">
                        <button class="btn btn-primary" onclick={()=>navigate("/inquilino/contratos?id="+alquiler.id)}>
                            Ver
                        </button>
                    </div>
                </div>
                <div class="card-footer text-center">
                    <strong>Estado:</strong> {alquiler.estado}
                </div>
            </div>
        </div>
        {/each}
    </div>
</div>
{#if showButton }
<div transition:fade={{duration:100}}>
    <BotonVolverArriba/>
</div>
{/if}