<template>
  <form @submit.prevent="handleSubmit">
    <select name="projects" id="projects" v-model="projectUri">
      <option
        v-for="project in currentProjects"
        :key="project.uri"
        :value="project.uri.substring(1)"
      >
        {{ project.title }}
      </option>
    </select>
    <input type="text" v-model="subject" />
    <textarea
      name="details"
      v-model="details"
      cols="30"
      rows="10"
      placeholder="Décrivez votre demande…"
      required
    ></textarea>
    <button type="submit">Soumettre</button>
  </form>
</template>

<script setup>
import { useApiStore } from "../../stores/api";
import { storeToRefs } from "pinia";
import { useProjectsStore } from "../../stores/projects";
import { ref } from "vue";

const { currentProjects } = storeToRefs(useProjectsStore());
const projectUri = ref("");
const subject = ref("Design to Light");
const details = ref("");
const api = useApiStore();

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

  const response = await api.post(
    formData,
    "/request-optimization-appointment.json"
  );

  console.log(response);
}
</script>

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