<script>
 import {
     Alert,
     Badge,
     Card,
     Col,
     Container,
     Icon,
     Row,
 } from '@sveltestrap/sveltestrap';

 import { goto } from '$app/navigation';

 import { my } from '$lib/stores/my.js';
 import { themesStore } from '$lib/stores/themes.js';
 import { settings } from '$lib/stores/settings.js';

 import RegistrationFormCreateTeam from '$lib/components/RegistrationFormCreateTeam.svelte';
 import RegistrationFormJoinTeam from '$lib/components/RegistrationFormJoinTeam.svelte';

 let form = { };
 let partR = false;
 let partJ = false;
 let messageClass;
 let message;

 function gotoHomeOnDiff(i) {
     my.refresh((my) => {
         if (my && my.team_id) {
             themesStore.refresh(() => {
                 goto('.');
             });
         } else if (i > 0) {
             setTimeout(gotoHomeOnDiff, 650, i-1);
         }
     })
 }

 async function submit(event) {
     message = "";

     // Remove empty members
     form.members = form.members.filter(function(m) {
	 return ((m.lastname != undefined && m.lastname != "") || (m.firstname != undefined && m.firstname != "") || (m.nickname != undefined && m.nickname != ""));
     });

     if (form.members.length == 0) {
	 messageClass = 'danger';
         if (partJ) {
             message = "Veuillez compléter vos informations avant de rejoindre l'équipe.";
         } else {
	     message = "Veuillez ajouter au moins un membre dans votre équipe !";
         }

	 form.members.push({ });
         form = form
	 return;
     }

     const response = await fetch('registration', {
	 method: "POST",
         headers: {'Accept': 'application/json'},
	 body: JSON.stringify(form),
     })

     if (response.status < 300) {
         const data = await response.json();
	 messageClass = 'success';
	 message = data.errmsg;

         gotoHomeOnDiff(20);
     } else {
	 messageClass = 'danger';

         let data = "";
         try {
             data = await response.json();
         } catch(e) {
             data = null;
         }

	 if (data && data.errmsg)
	     message = data.errmsg;
	 else
	     message = "Une erreur est survenue lors de l'inscription de l'équipe. Veuillez réessayer dans quelques instants.";
     }
 }

 // Override theme color
 document.body.style.backgroundColor = "";
</script>

<Container class="my-3">
    <Alert color="success" class="my-3">
        <Icon name="shield-check" />
        <strong>Félicitations&nbsp;! vous êtes maintenant authentifié auprès de notre serveur&nbsp;!</strong>
    </Alert>
    {#if !$my}
        {#if message}
            <Alert color="{messageClass}" class="my-3">
                <strong>{message}</strong>
            </Alert>
        {/if}
        {#if !$settings.allowRegistration}
            <Alert color="danger" class="my-3">
                <strong>Oups, il semblerait qu'il y ait eu un problème lors de l'attribution de votre certificat.</strong>
                Veuillez vous signaler auprès de notre équipe afin de corriger ce problème.
            </Alert>
        {:else}
            {#if !$settings.denyTeamCreation && !partJ}
                <Card body class="niceborder my-3">
                    <p>
                        Votre équipe n'est pas encore enregistrée sur notre serveur. Afin de
                        pouvoir participer au challenge, nous vous remercions de bien vouloir
                        remplir le formulaire d'inscription suivant&nbsp;:
                    </p>
                    <RegistrationFormCreateTeam bind:partR={partR} bind:value={form} on:submit={submit} />
                </Card>
            {/if}
            {#if $settings.canJoinTeam && !partR}
                <Card body class="niceborder my-3">
                    <p>
                        {#if !$settings.denyTeamCreation}
                            Si votre équipe est déjà créée, rejoignez-là&nbsp;!
                        {:else}
                            Vous n'êtes pas encore enregistré&middot;e sur notre serveur. Afin de
                            pouvoir participer au challenge, nous vous remercions de bien vouloir
                            rejoindre votre équipe&nbsp;:
                        {/if}
                    </p>
                    <RegistrationFormJoinTeam bind:partJ={partJ} bind:value={form} on:submit={submit} />
                </Card>
            {/if}
        {/if}
    {/if}
</Container>
