<script lang="ts" setup>

import {useNotificationStore} from "~/store/notification";
import {useAccountStore} from "~/store/account";
import type {ApiError} from "~/composables/fetch-api";

const email = ref();
const username = ref();
const emailConfirmation = ref();
const password = ref();
const confirmationPassword = ref();
const conditionChecked = ref(false);

function createAccount() {
  if (emailConfirmation.value !== email.value) {
    useNotificationStore().pushNotification("warn", {message: "Les e-mails ne correspondent pas."});
  } else if (password.value !== confirmationPassword.value) {
    useNotificationStore().pushNotification("warn", {message: "Les mots de passes ne correspondent pas."});
  } else {
    useAccountStore().create(username.value, email.value, password.value)
      .then(() => {
        useNotificationStore().pushNotification("success",{message: "Votre compte a bien été créer."});
        navigateTo("/login");
      })
      .catch((apiError: ApiError) => {
        let details;
        if (apiError.fieldErrors) {
          details = apiError.fieldErrors.map(error => `${error.fields!.join(", ")} ${error.detail}`);
        }
        useNotificationStore().pushNotification("warn",{message: apiError.message, details});
      });
  }
}

</script>
<template>
  <div>
    <section>
      <h1>Créer un compte</h1>
      <form class="form" @submit.prevent="createAccount">
        <label for="username">Nom de l'équipe *</label>
        <input id="username" v-model="username" type="text" autocomplete="username" required>
        <label for="email">E-mail *</label>
        <input id="email" v-model="email" type="email" autocomplete="email" required>
        <label for="emailConfirmation">Confirmation de l'e-mail *</label>
        <input id="emailConfirmation" v-model="emailConfirmation" type="email" autocomplete="email" required>
        <p class="form__help">Votre mot de passe doit fait au moins 8 caractères, et être composé d’au moins une
          majuscule, une minuscule,
          un chiffre de 0 à 9, et un caractère spécial parmi @?!#;</p>
        <label for="newPassword">Mot de passe *</label>
        <input id="newPassword" v-model="password" type="password" autocomplete="newPassword" required>
        <label for="confirmationPassword">Confirmation du mot de passe *</label>
        <input id="confirmationPassword" v-model="confirmationPassword" type="password" autocomplete="newPassword"
               required>
        <label>
          <input v-model="conditionChecked" type="checkbox" required/>
          En continuant, j’accepte
          <nuxt-link to="/cgu">les conditions d'utilisation de Boussole PLUSS et j’ai lu la politique de
            confidentialité
          </nuxt-link>
        </label>
        <div class="button-container">
          <nuxt-link class="button gray button-back" to="/login" aria-label="Retour à la page précédente">❮</nuxt-link>
          <button class="button orange" type="submit" :disabled="!conditionChecked">Enregistrer</button>
        </div>
      </form>
    </section>
  </div>
</template>

<style lang="scss" scoped>
@import "assets/css/spacing";

.form {
  input[type="checkbox"] {
    grid-column: span 2 / 3;
    margin-top: $small;
  }

}
</style>
