<script>
    import { intros, member } from './store.ts';
    import { member_can, Permission } from './permissions.ts';
    import { onMount } from 'svelte';
    import { uploadIntro } from './api.js';

    let enteredUrl = '';
    let enteredTitle = '';
    let selectedFile = null;
    let selectedGuild = null;
    let canDownloadAny = false;
    let downloadPromise = null;
    let uploadPromise = null;
    let allowedGuildList = [];

    $: allowedGuildList = $member.guilds
        .filter((guild) => member_can(guild.permissions, Permission.CanDownload))
        .map((guild) => guild);

    $: canDownloadAny = allowedGuildList.length > 0;

    const download = () => {
        if (!!selectedGuild) {
            downloadPromise = (async () => {
                await intros.addIntro(selectedGuild.id, enteredUrl, enteredTitle, $member.token);
                await intros.fetchIntros($member.guilds);
            })();
        } else {

        }
    };

    const upload = () => {
        // TODO: limit to 1 file
        if (!!selectedGuild) {
            uploadPromise = (async () => {
                await uploadIntro(selectedGuild.id, enteredTitle, selectedFile[0], $member.token);
                await intros.fetchIntros($member.guilds);
            })();
        } else {

        }
    }
</script>

{#if canDownloadAny}
    <div id="cardContent">
        <div>
            <h3>Download New Intro</h3>
            {#if !!downloadPromise}
                {#await downloadPromise}
                    <p>downloading...</p>
                {:then result}
                    <p>Downloaded</p>
                    <button on:click={() => {downloadPromise = null}}>Add another</button>
                {:catch err}
                    <p style='color: red'>{err}</p>
                    <button on:click={() => {downloadPromise = null}}>Ok</button>
                {/await}
            {:else}
                <select bind:value={selectedGuild}>
                    {#each allowedGuildList as guild}
                        <option value={guild}>{guild.name}</option>
                    {/each}
                </select>
                <input bind:value={enteredTitle} placeholder='enter intro title'>
                <input bind:value={enteredUrl} placeholder='enter video url'>
                <button on:click={download}>Download</button>
            {/if}
        </div>
        <div>
            <h3>Upload New Intro</h3>
            {#if !!uploadPromise}
                {#await uploadPromise}
                    <p>uploading...</p>
                {:then result}
                    <p>Uploaded</p>
                    <button on:click={() => {uploadPromise = null}}>Add another</button>
                {:catch err}
                    <p style='color: red'>{err}</p>
                    <button on:click={() => {uploadPromise = null}}>Ok</button>
                {/await}
            {:else}
                <select bind:value={selectedGuild}>
                    {#each allowedGuildList as guild}
                        <option value={guild}>{guild.name}</option>
                    {/each}
                </select>
                <input bind:value={enteredTitle} placeholder='enter intro title'>
                <input type="file" accept="audio/*, video/*" bind:files={selectedFile}>
                <button on:click={upload}>Upload</button>
            {/if}
        </div>
    </div>
{/if}

<style>
    div {
        display: flex;
        width: 85%;
        height: 85%;
        flex-direction: column;
        align-items: center;
        background-color: #2a2a4a;
        padding: 1.5em;
        box-shadow: 1px 3px 4px 1px #1f1f36;
        margin: 0.5em;
    }

    h3 {
        margin-top: 0;
        margin-bottom: 2em;
    }

    input, button {
        margin: 0.5em;
    }

    input {
        border-style: solid;
        border-color: #323259;
        width: 100%;
        text-align: center;
        color: lightgrey;
        background-image: linear-gradient(0deg, #23233d, #1f1f36);
    }

    input:focus-visible {
        outline: 2px solid #393963;
    }

</style>
