<script setup>
import { ref} from "vue";
import { Icon } from '@iconify/vue'
const props = defineProps({
  locale: String
})
import { createTranslator, t } from "../i18n";
const tl = createTranslator(props.locale);

const loading = ref(false);
const modalRef = ref(null);
const isFormPendiente = ref(true);

const openModal = () => {
    modalRef.value?.showModal();
};

const closeModal = () => {
    modalRef.value?.close();
};

const handleSubmit = async (e) => {
  e.preventDefault();

  loading.value = true;
  
  const formData = new FormData(e.target);

  try {
    const response = await fetch("/api/emailPostulacion/send", {
      method: "POST",
      body: formData,
    });

    if (!response.ok) throw new Error();

  } catch (error) {
    console.error(error);
  } finally {
    e.target.reset();
    loading.value = false;
    closeModal();
  }
};
</script>

<template>
  <template v-if="isFormPendiente">

    <button
      @click="openModal"
      class="btn rounded-none p-7 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase text-lg"
    >
      {{ tl("info.register") }}
    </button>


    <dialog
      ref="modalRef"
      class="modal modal-bottom sm:modal-middle p-8"
    >
      <div class="modal-box bg-[#EBE6D2] text-[#22523F] rounded-none p-8">

        <!-- Botón cerrar -->
        <button
          type="button"
          @click="closeModal"
          class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
        >
          <Icon icon="ph:x" class="text-2xl" />
        </button>

        <!-- Título -->
        <h3 class="text-lg font-bold lg:text-2xl font-secondary text-center uppercase">
          {{ tl("info.modal.title") }}
        </h3>

        <!-- Texto -->
        <p class="text-lg font-primary text-center mt-10">
          {{ tl("info.modal.text") }}
        </p>

      </div>
    </dialog>
  </template>
  <template v-else>
    <button
    @click="openModal"
    class="btn rounded-none p-7 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase text-lg"
  >
    {{ tl("info.register") }}
  </button>

    <dialog ref="modalRef" id="my_modal_5" class="modal modal-bottom sm:modal-middle p-8">
      <div class="modal-box bg-[#EBE6D2] text-[#22523F] rounded-none p-8">

        <form method="dialog">
          <button
            v-on:click="closeModal"
            type="button"
            class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
          >
            <Icon icon="ph:x" class="w-6 h-6" />
          </button>
        </form>

        <h3 class="text-lg font-bold lg:text-2xl font-secondary text-center">
          Formulario de Registro
        </h3>

        <div class="form py-4 mt-6 ">

          <form
            id="voluteenFrom"
            action="/api/emailPostulacion/send"
            method="post"
            @submit="handleSubmit"
            class="flex flex-col gap-2 place-items-center">

            <label class="input rounded-none bg-white">
              <span>Nombres <span class="text-error">*</span></span>
              <input name="nombres" type="text" placeholder="Nombres"
                class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
                required />
            </label>

            <label class="input rounded-none bg-white">
              <span>Apellidos <span class="text-error">*</span></span>
              <input name="apellidos" type="text" placeholder="Apellidos"
                class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
                required />
            </label>

            <label class="input rounded-none bg-white">
              <span>País</span>
              <input name="pais" type="text" placeholder="Pais"
                class="w-full max-w-xs rounded-none" />
            </label>

            <label class="input rounded-none bg-white">
              <span>Lugar</span>
              <input name="lugar" type="text" placeholder="Lugar"
                class="w-full max-w-xs rounded-none" />
            </label>

            <label class="input rounded-none bg-white">
              <span>Dirección</span>
              <input name="direccion" type="text" placeholder="Dirección"
                class="w-full max-w-xs rounded-none" />
            </label>

            <label class="input rounded-none bg-white">
              <span>Teléfono <span class="text-error">*</span></span>
              <input name="telefono" type="text" placeholder="Teléfono"
                class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
                required />
            </label>

            <label class="input validator rounded-none bg-white">
              <span>Email <span class="text-error">*</span></span>
              <input name="email" type="email"
                placeholder="Ingresa Correo Electrónico"
                class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
                required />
            </label>

            <button
              type="submit"
              :disabled="loading"
              class="btn mt-4 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase rounded-none">

              {{ loading ? "Enviando..." : "Enviar" }}

            </button>
          </form>

        </div>
      </div>
    </dialog>
    </template>
  </template>
