<script lang="ts">
    import "./css/dotted-line.css";
    import {urlG} from "../stores/urlStore";
    import type { AdminParametrosBusqueda, PropiedadAdmin } from "../types";
    import { onMount } from "svelte";

    let canthabitaciones:number = $state(0);
    let servicios = ["Gas", "Internet", "Telefono", "Luz"];
    let serviciosSel:string[] = $state([]);
    let tipo: number = $state(0);



    let { Params }: { Params: (a: AdminParametrosBusqueda) => void} = $props();

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

    async function formsubmit(e: Event){
        e.preventDefault();
        let params: AdminParametrosBusqueda = {
          cantidadhabitaciones: canthabitaciones||0,
          pag: 1,
          servicios: serviciosSel.join(","),
          tipopropiedad: tipo,
        };
        Params(params);
    }
</script>

<form class="card p-3 border border-succes">

    <div>Busqueda Filtrada
      <div class="dotted-line"></div> 
    </div>
  
    <div class="form-floating mb-3">
      <input
        type="number"
        id="canthabitaciones"
        class="form-control"
        bind:value={canthabitaciones}
        min="0"
        placeholder="Cantidad de Habitaciones"
        required
      />
      <label for="canthabitaciones">Cantidad de Habitaciones</label>
    </div>
  
    <div class="mb-3">
      <h6 class="form-floating form-label">Servicios</h6>
      {#each servicios as servicio}
      <div class="form-check">
        <input
          type="checkbox"
          class="form-check-input"
          bind:group={serviciosSel}
          value={servicio}
          id={`servicio-${servicio}`}
          
        />
        <label class="form-check-label" for={`servicio-${servicio}`}>
          {servicio}
        </label>
      </div>
      {/each}
    </div>
  
    <div class="form-floating mb-3">
      <select id="idtipo" class="form-select" bind:value={tipo} required>
        <option value="0">No Define</option>
        <option value="1">Casa</option>
        <option value="2">Piso</option>
        <option value="3">Departamento</option>
        <option value="4">Galpon</option>
        <option value="5">LocalComercial</option>
        <option value="6">Oficina</option>
      </select>
      <label for="idtipopropiedad">Tipo de propiedad</label>
    </div>
  
    <button type="submit" class="btn btn-primary w-100 d-flex align-items-center justify-content-center" onclick={formsubmit}>
      Buscar
      <img src="/zoom.svg" alt="" class="ms-2" style="height: 1.2em;" />
    </button>
  </form>
  