<script setup lang="ts">
const {
  isModalOpen,
  modal_data,
  modal_form,
  modal_state,
  openModal,
  closeModal,
  toggleModal,
  openForm,
  validateInput,
  submit,
} = useModalState();

const modalStatus = {
  loading: ["mdi:circle-arrows", "Отправляем данные"],
  success: ["mdi:check-circle-outline", "Данные отправлены"],
  error: ["mdi:close-circle-outline", "Ошибка отправки"],
};

const policy = () => {
  navigateTo("/policy", {
    open: {
      target: "_blank",
    },
  });
};
</script>

<template>
  <div v-if="isModalOpen" class="modal-backdrop" @click.self="toggleModal">
    <div class="modal">
      <span class="modal-close" @click="toggleModal">
        <Icon name="mdi:close" />
      </span>
      <div
        v-if="modal_state.show_status"
        class="modal-status"
        :class="[modal_state.show_status]"
      >
        <div class="modal-status-icon">
          <Icon :name="modalStatus[modal_state.show_status][0]" />
        </div>
        <div class="modal-status-text">
          {{ modalStatus[modal_state.show_status][1] }}
        </div>
      </div>
      <template v-else-if="modal_state.show_form">
        <h2>Оставьте контакты для связи</h2>
        <form @submit.prevent="submit" ref="form" class="modal-content">
          <input type="text" placeholder="Ваше имя" v-model="modal_data.name" />
          <input
            type="phone"
            placeholder="Ваш номер телефона"
            v-model="modal_data.phone"
            @keypress="validateInput"
          />
          <input
            type="email"
            placeholder="Ваш e-mail"
            v-model="modal_data.email"
            @keypress="validateInput"
          />
          <div class="flex gap-4 justify-between items-center">
            <input type="checkbox" id="policy" v-model="modal_data.policy" />
            <label for="policy">
              Нажимая кнопку "Отправить", вы даете согласие на
              <NuxtLink to="/policy" @click="policy">
                обработку персональных данных.
              </NuxtLink>
            </label>
          </div>
          <div class="flex gap-4">
            <button class="not-prose" :disabled="modal_form.disabled" type="submit">
              Отправить
            </button>
            <button class="not-prose" type="reset" @click="toggleModal">Отмена</button>
          </div>
        </form>
      </template>
      <template v-else>
        <div class="flex gap-4 justify-center">
          <button class="not-prose" @click="openForm">
            Отправить расчет на <span class="whitespace-nowrap">e-mail</span>
          </button>
        </div>
      </template>
    </div>
  </div>
</template>
