<script>
 import { createEventDispatcher } from 'svelte';

 import {
     Alert,
     Badge,
     Button,
     Card,
     Col,
     Container,
     Icon,
     Row,
 } from 'sveltestrap';

 import { settings } from '$lib/stores/settings.js';
 import { teams } from '$lib/stores/teams.js';

 import RegistrationRowMember from './RegistrationRowMember.svelte';

 const dispatch = createEventDispatcher();

 export let value = { };

 function JvalidateTeam() {
     if (!value.members || value.members.length == 0) {
         value.members = [{ }];
     }
     value = value;

     partJ = true;
 }

 function submit(event) {
     if (!partJ) {
         JvalidateTeam();
     } else {
         dispatch('submit', event);
     }
 }

 export let partJ = false;
 let message = "";
 let messageClass = "danger";
</script>

{#if Object.keys($teams).length}
    <form on:submit|preventDefault={submit}>
        <Row>
            <label for="jTeam" class="col col-form-label">Nom d'équipe</label>
            <div class="col-sm-10">
	        <div class="input-group">
	            <select
                        class="form-select"
                        id="jTeam"
                        bind:value={value.jTeam}
                        required
                        disabled={partJ}
                    >
                        {#each Object.keys($teams) as tid, index}
                            <option value={$teams[tid].id}>
                                {$teams[tid].name}
                            </option>
                        {/each}
                    </select>
	            <Button color="info" type="button" on:click={JvalidateTeam} disabled={partJ}>Valider</Button>
	            <div class="invalid-feedback">
	                Veuillez indiquer une équipe valide.
	            </div>
	        </div>
            </div>
        </Row>

        {#if partJ}
            <h4 class="mt-4">
                Vos informations
            </h4>
            {#if message}
                <p class={messageClass}>{message}</p>
            {/if}

            <RegistrationRowMember
                bind:member={value.members[0]}
            />

            <Row>
                <Col sm={{ size: 9, offset: 3 }} md={{ size: 8, offset: 4 }}>
                <Button color="info" class="mt-4" type="submit" disabled={!value.jTeam}>
	            C'est parti&nbsp;!
                    <Icon name="chevron-right" />
                </Button>
            </Col>
            </Row>
        {/if}
    </form>
{:else}
    <p class="card-text">
        Aucune équipe enregistrée pour l'instant.
    </p>
{/if}
