<script>
 import { QuestionProposal } from '../lib/questions';

 export let edit = false;
 export let proposals = [];
 export let kind = 'mcq';
 export let readonly = false;
 export let id_question = 0;
 export let value;

 let valueCheck = [];
 $: {
     console.log(value);
     if (value) {
         valueCheck = value.split(',');
     }
 }

 function addProposal() {
     const p = new QuestionProposal();
     p.id_question = id_question;
     proposals.push(p);
     proposals = proposals;
 }
</script>

{#each proposals as proposal, pid (proposal.id)}
    <div class="form-check">
        {#if kind == 'mcq'}
            <input
                type="checkbox"
                class="form-check-input"
                disabled={readonly}
                name={'proposal' + proposal.id_question}
                id={'p' + proposal.id}
                bind:group={valueCheck}
                value={String(proposal.id)}
                on:change={() => { value = valueCheck.join(',')}}
            >
        {:else}
            <input
                type="radio"
                class="form-check-input"
                disabled={readonly}
                name={'proposal' + proposal.id_question}
                id={'p' + proposal.id}
                bind:group={value}
                value={String(proposal.id)}
            >
        {/if}
        {#if edit}
            <form on:submit|preventDefault={() => { proposal.save().then(() => proposal = proposal);  } }>
                <div class="input-group input-group-sm mb-2">
                    <input
                        type="text"
                        class="form-control"
                        bind:value={proposal.label}
                        on:input={() => proposal.changed = true}
                    >
                    <button
                        type="button"
                        class="btn btn-outline-danger"
                        tabindex="-1"
                        disabled={!proposal.id}
                        on:click={() => { proposal.delete().then(() => { proposals.splice(pid, 1); proposals = proposals; }); }}
                    >
                        <i class="bi bi-trash"></i>
                    </button>
                    <button
                        type="submit"
                        class="btn"
                        class:btn-success={proposal.changed}
                        class:btn-outline-success={!proposal.changed}
                        disabled={!proposal.changed}
                    >
                        <i class="bi bi-check"></i>
                    </button>
                </div>
            </form>
        {:else}
            <label
                class="form-check-label"
                for={'p' + proposal.id}
            >
                {proposal.label}
            </label>
        {/if}
    </div>
{/each}
{#if edit}
    {#if kind == 'mcq'}
        <input
            type="checkbox"
            class="form-check-input"
            disabled
            checked
        >
    {:else}
        <input
            type="radio"
            class="form-check-input"
            disabled
            checked
        >
    {/if}
    <button
        type="button"
        class="btn btn-sm btn-link"
        on:click={addProposal}
    >
        ajouter
    </button>
{/if}
