<script lang="ts">
    import type { MensajeDto } from "../types";

    let {getContrato, onConfirm, onCancel, onClose, men
        } : {
        getContrato:(idcontrato:number)=>void,
        onConfirm:(idcontrato:number)=>void,
        onCancel:(idcontrato:number)=>void,
        onClose:()=>void,
        men: MensajeDto
        } = $props();

    let contratoDescargado = $state(false);
    let leiContrato:boolean = $state(false);

  function descargarContrato() {
    let idcontrato = Number(men.mensaje.split(" ").reverse()[0]);
    getContrato(idcontrato);
    contratoDescargado = true;
  }

  function confirmar() {
    if (leiContrato) {
      let idcontrato = Number(men.mensaje.split(" ").reverse()[0]);
      onConfirm(idcontrato);
      onClose();
    }
  }

  function rechazar() {
    if (leiContrato) {
      let idcontrato = Number(men.mensaje.split(" ").reverse()[0]);
      onCancel(idcontrato);
      onClose();
    }
  }
</script>

<div class="modal show d-block" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Contrato</h5>
        <button type="button" class="btn-close" onclick={onClose} aria-label="Cerrar"></button>
      </div>

      <div class="modal-body">
        <p>Por favor, descargue y lea el contrato antes de aceptar o rechazar.</p>
        <div class="d-flex flex-column align-items-center">
            <button class="btn btn-primary mb-3" onclick={descargarContrato}>
                Descargar contrato
            </button>
            <div class="form-check">
                <input
                class="form-check-input"
                type="checkbox"
                id="leiContratoCheckbox"
                bind:checked={leiContrato}
                disabled={!contratoDescargado}
                />
                <label class="form-check-label" for="leiContratoCheckbox">
                    Leí el contrato con el agente de la inmobiliaria
                </label>
            </div>
        </div>
      </div>

      <div class="modal-footer d-flex justify-content-between">
        <button
          class="btn btn-success"
          onclick={confirmar}
          disabled={!leiContrato}
        >
          Aceptar
        </button>
        <button
          class="btn btn-danger"
          onclick={rechazar}
          disabled={!leiContrato}
        >
          Rechazar
        </button>
        <button class="btn btn-secondary" onclick={onClose}>
          Cerrar
        </button>
      </div>
    </div>
  </div>
</div>

<style>
  .modal {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
  }
</style>