<script lang="ts">
  import InputWithLabel from "../../components/forms/InputWithLabel.svelte";
  import { form, field } from "svelte-forms";
  import { getContext, onMount } from "svelte";
  import { required, max, min, matchField, pattern } from "svelte-forms/validators";
  import { errorMsg } from "../../utils/forms";
  import { writable } from "svelte/store";
  import { goto } from "$app/navigation";

  let errors = {
    password_error: null,
    username_error: null,
    confirm_error: null
  };
  const { register, isAuth, initialLoading } = getContext("auth");
  const username = field("username", "", [required(), max(20)]);
  const password = field("password", "", [required(), min(8), pattern(/[0-9]/), pattern(/[A-Z]/)]);
  const confirm = field("confirm", "", [required(), matchField(password)]);
  const myForm = form(username, password, confirm);

  $: !$initialLoading && !!$isAuth && goto("/dashboard");
  let loading = false;
</script>


<svelte:head>
  <title>S'inscrire</title>
</svelte:head>

<div class="parent">
  <div>
    <h1>S'inscrire</h1>
    <InputWithLabel
      change={(e) => {
				errors.username_error = null;
			}}
      type="text"
      bind:value={$username.value}
      label="Nom d'utilisateur"
      errors={[
				...errorMsg($myForm, 'username'),
				...(errors.username_error != null ? [errors.username_error] : [])
			]}
    />
    <InputWithLabel
      change={(e) => {
				errors.password_error = null;
			}}
      type="password"
      bind:value={$password.value}
      label="Mot de passe"
      errors={[
				...errorMsg($myForm, 'password'),
				...(errors.password_error != null ? [errors.password_error] : [])
			]}
    />
    <InputWithLabel
      type="password"
      change={(e) => {
				errors.confirm_error = null;
			}}
      bind:value={$confirm.value}
      label="Confirmation"
      errors={[
				...errorMsg($myForm, 'confirm'),
				...(errors.confirm_error != null ? [errors.confirm_error] : [])
			]}
    />
    <button
      class="primary-btn"
      on:click={() => {
				loading = true
				register($username.value, $password.value, $confirm.value).then(()=>{loading=false}).catch((r) => {
					loading = false


					errors = { ...errors, ...r.data.detail };
				});
			}}
      disabled={!$myForm.valid}
    >
      <!--			loading et span.spinner else text-->
      {#if loading}
        <span class="spinner"></span>
      {:else}
        S'inscrire
      {/if}
    </button>
  </div>
</div>

<style lang="scss">
  h1 {
    font-size: 4em;
  }

  .parent {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;

    div {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      width: min(100%, 666px);
      padding: 7px 20px;
    }
  }

  .spinner {
    width: 15px;
    height: 15px;
    border-width: 2px !important;
  }
</style>
