<script>
    import { member, intros } from '../store.ts';
    import { deleteIntro } from '../api.js';
    import IntroSelector from '../IntroSelector.svelte';

    let deletePromise = null;

    const apiDeleteIntro = async (guild, selectedIntros) => {
        await deleteIntro(guild, selectedIntros, $member.token);
        await member.pullData($member.token);
        await intros.fetchIntros($member.guilds);
    };
    const deleteIntros = (event) => {
        deletePromise = apiDeleteIntro(event.detail.guild, event.detail.intros);
    };
</script>

{#if !!deletePromise}
    {#await deletePromise}
    {:catch err}
        <p style="color: red">{err}</p>
    {/await}
{/if}
<div id="nestedCardContent">
    {#each $member.guilds as guild}
        <h4>{guild.name}</h4>
        <IntroSelector
                guild={guild.id}
                exclude={[]}
                on:confirm={deleteIntros}
                btnLabel="Delete Intro From Guild" 
                btnDanger={true}
                emptyMsg="Your guild doesn't have any intros, try adding some below"
                />
    {/each}
</div>
