<template>
  <Dialog
    id="optimization-request-dialog"
    v-model:visible="isOpen"
    modal
    :draggable="false"
    dismissableMask="true"
    header="Demander un rendez-vous"
    class="dialog"
    :closeOnEscape="true"
    style="z-index: 9999"
  >
    <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 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)"
        >
          {{ 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 { ref, watch } from "vue";

const { currentProjects } = storeToRefs(useProjectsStore());
const projectUri = 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");
  }
});

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>

<style scoped>
form {
  position: fixed;
  background-color: #fff;
  z-index: 999;
}
</style>
