<script>
    import { member, intros } from '../store.ts';
    import { member_can } from '../permissions.ts';
    import Login from '../Login.svelte';
    import IntroSelector from '../IntroSelector.svelte';
    import IntroDownloader from '../IntroDownloader.svelte';

    let addIntroPromise = null;
    let removeIntroPromise = null;

    const apiAddIntro = async (guild, channel, username, selectedIntros) => {
        for (const intro of selectedIntros) {
            const response = await fetch(
                `https://${process.env.API_URL}/memes/api/intros/${guild}/${channel}/${intro}`,
                { method: 'POST', headers: {"token": $member.token} }
            );
            if (!response.ok) {
                const body = await response.json();
                throw new Error(`${body}`);
            }
        }

        await member.pullData($member.token);
    };

    const apiRemoveIntro = async (guild, channel, username, selectedIntros) => {
        for (const intro of selectedIntros) {
            const response = await fetch(
                `https://${process.env.API_URL}/memes/api/intros/${guild}/${channel}/${intro}/remove`,
                { method: 'POST', headers: {"token": $member.token} }
            );
            if (!response.ok) {
                const body = await response.json();
                throw new Error(`${body}`);
            }
        }

        await member.pullData($member.token);
    };

    const addIntros = (event) => {
        addIntroPromise = apiAddIntro(event.detail.guild, event.detail.channel, $member.username, event.detail.intros);

    }
    const removeIntros = (event) => {
        removeIntroPromise = apiRemoveIntro(event.detail.guild, event.detail.channel, $member.username, event.detail.intros);
    }
</script>

<h1>MemeJoin - A bot for user intros</h1>

{#if !!$member}
    <p>{$member.username}</p>

    <h3>Your Intros</h3>
    <div id="intros">
        {#each $member.guilds as guild}
            <h4>{guild.name}</h4>
            <IntroDownloader />
            <div id="guild-settings">
                {#each guild.channels as channel}
                    <div id="channel-settings">
                        <h4>{channel.name}</h4>
                        {#await addIntroPromise then result}
                        {:catch err}
                            <p style='color: red'>Failed to add intro</p>
                        {/await}
                        {#await removeIntroPromise then result}
                        {:catch err}
                            <p style='color: red'>Failed to remove intro</p>
                        {/await}
                        <IntroSelector
                                guild={guild.name}
                                channel={channel.name}
                                include={channel.intros.map((x) => x.index)}
                                on:confirm={removeIntros}
                                btnLabel="Remove" 
                                emptyMsg="You don't have any intros, try adding one"
                                />

                        <h3>Add Intros</h3>
                        <IntroSelector 
                                guild={guild.name}
                                channel={channel.name}
                                exclude={channel.intros.map((x) => x.index)}
                                on:confirm={addIntros}
                                emptyMsg="There are no intros"
                                />
                    </div>
                {/each}
            </div>
        {/each}
    </div>
{:else}
    <Login />
{/if}


