<script>
 import {
     Button,
     Card,
     CardHeader,
     CardBody,
     Icon,
 } from 'sveltestrap';

 import { my } from '../stores/my.js';

 export let refresh_my;

 let newTeamName = "";

 function gotoHomeOnDiff(i) {
     refresh_my((my) => {
         if (my && my.name == newTeamName) {
             newTeamName = "";
	     messageClass = "info";
	     sberr = "Votre nom d'équipe a été changé avec succès.";
             message = "";
         } else if (i > 0) {
             setTimeout(gotoHomeOnDiff, 850, i-1);
         }
     })
 }

 async function submitChangeName(event) {
     message = "";
     sberr = "";

     if (newTeamName.length < 1) {
	 messageClass = "danger";
	 sberr = "Nom d'équipe invalide: pas d'entrée.";
	 return false;
     }
     else if (newTeamName.length > 32) {
	 messageClass = "danger";
	 sberr = "Nom d'équipe invalide: pas plus de 32 caractères.";
	 return false;
     }
     else if (!newTeamName.match(/^[A-Za-z0-9 àéèêëîïôùûü_-]+$/)) {
	 messageClass = "danger";
	 sberr = "Nom d'équipe invalide: seuls les caractères alpha-numériques sont autorisés.";
	 return false;
     }

     const response = await fetch('/chname', {
	 method: "POST",
	 body: JSON.stringify({newName: newTeamName}),
     });

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

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

	 if (data && data.errmsg)
	     message = data.errmsg;
	 if (response.statys != 402)
	     sberr = "Une erreur est survenue lors de la demande de changement de nom. Veuillez réessayer dans quelques instants.";
     }
 }

 let sberr = "";
 let message = "";
 let messageClass = "danger";
</script>

<Card class="mb-3 border-info">
    <CardHeader class="bg-info">
        <Icon name="input-cursor-text" />
        Changer de nom d'équipe
    </CardHeader>
    <CardBody>
        {#if sberr || message}
            <p class="card-text text-{messageClass}">
                {#if !sberr}
                    <strong>Votre demande a bien été envoyée !</strong>
                {:else}
                    <strong>{sberr}</strong>
                {/if}
                {message}
            </p>
        {/if}
        <form on:submit|preventDefault={submitChangeName}>
            <div class="form-group row">
	        <label for="newName" class="col col-form-label">Nouveau nom</label>
	        <div class="col-sm-10">
	            <div class="input-group">
	                <input type="text" class="form-control" id="newName" bind:value={newTeamName} placeholder="{$my.name}">
	                <Button type="submit" class="btn btn-info">Valider</Button>
	            </div>
	        </div>
            </div>
        </form>
    </CardBody>
</Card>
