<script lang="ts">
  import { fade } from "svelte/transition";
  import ModalEstatico from "./ModalEstatico.svelte";
  import ModificarPropiedadForm from "./modificarPropiedadForm.svelte";

  let { id, ubicacion, tipo, letra, piso,canthabitaciones, servicios }  = $props();

  let modal: boolean = $state(false);
  let modalpayload: string = $state("");
  
  let modificar: boolean = $state(false);
  
  function setmod(){
    modificar = !modificar;
  }
  
  async function BajaPropiedad(){
    modal = false;
    try {
      const responce = await fetch("http://localhost:5007/api/propiedad?id="+id, {
        method: "DELETE",
        headers:{
          'Auth' : String(sessionStorage.getItem("token")),
          'Email' : String(localStorage.getItem("email"))
        }, 
        });
      
        const json = await responce.json();
        modalpayload = json.message;
        modal = true;
        location.reload();      
    }catch (e){
      console.error(e);
    }
  }
</script>

<tr in:fade>
  <td>{id}</td>
  <td>{ubicacion}</td>
  <td>{canthabitaciones}</td>
  <td>{letra}</td>
  <td>{piso}</td>  	
 	<td>{tipo}</td>
  <td>{servicios}</td>
  <td class="text-end">
    <button class="btn btn-outline-secondary" onclick={()=> setmod()}>Modificar</button>
    <button class="btn btn-outline-secondary" >Ver Más</button>
    <button class="btn btn-outline-danger" onclick={() => BajaPropiedad()}>Baja</button>
  </td>
</tr>
{#if modal}
	<ModalEstatico payload={modalpayload}/>
{/if}
{#if modificar}
  <tr transition:fade={{duration:100}}> 
    <td colspan="8">
      <ModificarPropiedadForm {id} {ubicacion} {canthabitaciones} {letra} {piso} {tipo} {servicios}/>
    </td>
  </tr>
{/if}
