<template>
  <Dialog
    id="optimization-request-dialog"
    v-model:visible="isOpen"
    modal
    :draggable="false"
    :dismissableMask="true"
    header="Demander un rendez-vous"
    class="dialog"
    :closeOnEscape="true"
    @click="preventClose($event)"
  >
    <template #header>
      <h2 class="font-serif text-lg">Demander un rendez-vous</h2>
      <p class="flex justify-center text-sm" data-icon="leaf">
        Design to Light
      </p>
    </template>

    <form
      @submit.prevent="handleSubmit"
      class="w-full h-full p-16 flex flex-col"
      style="--row-gap: 1rem"
    >
      <label for="projects" class="sr-only">Projet</label>
      <select
        name="projects"
        id="projects"
        v-model="projectUri"
        class="w-full rounded-md border border-grey-200 px-16 py-12"
        required
      >
        <option value="">Sélectionnez le projet</option>
        <option
          v-for="project in currentProjects"
          :key="project.uri"
          :value="project.uri.substring(1)"
          :disabled="project.hasOptimizationRequest ? '' : undefined"
        >
          {{ project.title }}
        </option>
      </select>

      <label for="appointment-subject" class="sr-only"
        >Objet du rendez-vous</label
      >
      <input
        type="text"
        v-model="subject"
        id="appointment-subject"
        placeholder="Objet du rendez-vous"
        class="w-full rounded-md border border-grey-200 px-16 py-12"
        required
      />

      <label for="appointment-details" class="sr-only">Détails du projet</label>
      <textarea
        id="appointment-details"
        name="details"
        v-model="details"
        cols="30"
        rows="10"
        placeholder="Décrivez votre demande…"
        class="w-full flex-1 rounded-md border border-grey-200 px-16 py-12"
        required
      ></textarea>

      <footer class="flex-columns w-full mt-16" style="column-gap: 0.5rem">
        <button class="btn btn--black-10" @click="emits('close')">
          Annuler
        </button>
        <button class="btn" type="submit">Soumettre</button>
      </footer>
    </form>
  </Dialog>
</template>

<script setup>
import Dialog from 'primevue/dialog';
import { useApiStore } from '../../stores/api';
import { storeToRefs } from 'pinia';
import { useProjectsStore } from '../../stores/projects';
import { usePageStore } from '../../stores/page';
import { ref, watch } from 'vue';

const { page } = storeToRefs(usePageStore());
const { currentProjects } = storeToRefs(useProjectsStore());
const projectUri =
  page.value.template === 'project' ? ref(page.value.uri) : ref('');
const subject = ref('');
const details = ref('');
const api = useApiStore();
const isOpen = ref(true);
const emits = defineEmits('close');

watch(isOpen, (newValue) => {
  if (!newValue) {
    emits('close');
  }
});

function preventClose(event) {
  event.stopImmediatePropagation();
}

async function handleSubmit() {
  const formData = {
    projectUri: projectUri.value,
    subject: subject.value,
    details: details.value,
  };

  const response = await api.post(
    formData,
    '/request-optimization-appointment.json'
  );
  isOpen.value = false;
}
</script>
