<script lang="ts">
    import { onMount } from "svelte";
    import type { AltaDefectoDto } from "../types";
    let { idcontrato, onConfirm 
    } : {
         idcontrato: number, onConfirm:(data: AltaDefectoDto)=>void} = $props();
    
    let formData: AltaDefectoDto = $state({
        descripcion:"",
        costo:0, 
        idcontrato:idcontrato,
        iddivisa:0, 
        pagainquilino:0
    });
    async function handle(e:Event){
        e.preventDefault();
        onConfirm(formData);
    }
    let n:number = $state(0);
    $effect(()=> {n = formData.descripcion.length});
</script>

<div class="container">
  <form>
    <div class="mb-3">
      <label for="descripcion" class="form-label">Descripción</label>
      <input
        type="text"
        id="descripcion"
        class="form-control"
        bind:value={formData.descripcion}
        placeholder="Ingrese la descripción"
        required
        maxlength="100"
      />
      <small class="form-text text-muted">
        {n}/100
      </small>
    </div>


    <div class="mb-3 input-group">
        <span class="input-group-text">$</span>
        <input
            type="number"
            id="costo"
            class="form-control"
            bind:value={formData.costo}
            placeholder="Ingrese el costo"
            step="0.01"
            required
        />
    </div>

    <div class="mb-3">
        <div class="form-check">
          <input
            type="radio"
            id="danioUso"
            class="form-check-input"
            bind:group={formData.pagainquilino}
            value="1"
            required
          />
          <label for="danioUso" class="form-check-label">Daño por uso</label>
        </div>
        <div class="form-check">
          <input
            type="radio"
            id="danioEstructural"
            class="form-check-input"
            bind:group={formData.pagainquilino}
            value="0"
          />
          <label for="danioEstructural" class="form-check-label">Daño Estructural</label>
        </div>
      </div>

    <div class="mb-3">
      <label for="iddivisa" class="form-label">Divisa</label>
      <select
        id="iddivisa"
        class="form-select"
        bind:value={formData.iddivisa}
        required
      >
        <option value="0">ARS</option>
        <option value="1">USD</option>
      </select>
    </div>

    <button type="submit" class="btn btn-primary" onclick={(e)=> handle(e)}>Subir</button>
  </form>
</div>
