<script lang="ts">
  import type { PropiedadDto } from "../types";
  import ModalConfirm from "./ModalConfirm.svelte";
  import {urlG} from "../stores/urlStore";
    import ModalEstatico from "./ModalEstatico.svelte";
  
  let { prop }: { prop: PropiedadDto } = $props();

  let show: boolean = $state(false);
  let token = sessionStorage.getItem("token");
  let remitente = localStorage.getItem("email");
  const accion = "Nuevo Alquiler";
  let modaldata = $state("");
  let mensaje = `Alquiler: ${prop.ubicacion} a ${remitente}`;

  const message: string = "Queres consultar con el propietario por el alquiler? (esto le envia una notificacion y email al propietario)";
  

  function Consultar() {
    show = true;
  }
  
  async function onConfirm() {
    const propiedad = prop.id;
    try { 
      const responce = await fetch($urlG+"/api/notificaciones/consultaAlquiler", {
        method: "POST",
        headers: {
          "Auth": String(token),
          "Content-Type": "application/json"
        },
        body : JSON.stringify({remitente, accion, mensaje, propiedad})
      });
      if (responce.ok){
        let data = await responce.json();

      }
    } catch {

    }

    show=!show;
  }
  
  function onCancel() {
    show=!show;
  }

</script>

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


<ModalConfirm {show} {message} title="Consulta" {onConfirm} {onCancel}/>
<div class="card text-center border shadow-sm">
  <div class="card-header bg-primary text-white">
    <h5 class="mb-0">{prop.tipo}</h5>
  </div>
  <div class="card-body">
    <div class="card-img-top mb-3">
      <i class="bi bi-building" style="font-size: 3rem;"></i>
    </div>
    <h6 class="card-title">{prop.ubicacion}</h6>
    <p class="card-text">
      <strong>Habitaciones:</strong> {prop.canthabitaciones}<br>
      <strong>Piso:</strong> {prop.piso || "N/A"}<br>
      <strong>Letra:</strong> {prop.letra || "N/A"}<br>
      <strong>Servicios:</strong> {prop.servicios || "Sin servicios especificados"}<br>
      <strong>Monto:</strong>
      {#if prop.iddivisa == 0}
      AR$    
      {:else}
      US$
      {/if}
       {prop.monto}<br>
    </p>
    <button class="btn btn-primary" onclick={Consultar}>Alquilar</button>
  </div>
  <div class="card-footer text-muted">
    ID Propiedad: {prop.id}
  </div>
</div>
