<script lang="ts">
    import Island from "$lib/islands/island.svelte";
    import { ql } from "$lib/stores/quick-links";
    import toast from "svelte-french-toast";
    export let variables = {
        title: "Quick Links",
    };

    let qlData: string[] = [];
    $: {
        qlData = $ql;
        console.log(qlData);
    }

    let saveButton = "Save";

    async function timeout(ms: number): Promise<any> {
        return new Promise((resolve) => setTimeout(resolve, ms));
    }

    function save() {
        toast.promise(saveQl(), {
            loading: "Saving...",
            success: "Quick Links saved!",
            error: "Failed to save.",
        });
    }

    async function saveQl() {
        // Fetch the content of all text entries within the island then run ql.set([ARRAY OF INPUT CONTENT])
        const inputs = document.getElementsByClassName("qlInput");
        let inputLinks: string[] = [];
        for (let item of inputs) {
            let text = (<HTMLInputElement>item)?.value;
            if (text !== "") {
                inputLinks.push(text);
            }
        }
        console.log(inputLinks);
        ql.set(inputLinks);
        await timeout(1000);
        saveButton = "Saved";
    }

    function clearQl() {
        ql.set([]);
        saveButton = "Saved";
        toast.success("Cleared Quick Links.");
    }

    function addQlBox() {
        saveButton = "Save";
        const updatedQl = [...$ql, ""];
        $ql = updatedQl;
        ql.set(updatedQl);
    }

    function handleClick(event: any) {
        // Handle the click event here
        console.log("Island Clicked");
        // You can access the `variables` passed to the Island component here if needed
    }
</script>

<Island on:click={handleClick} {variables}>
    {#if $ql.length === 0}
        <p>Click the + button to add links</p>
    {/if}
    <div id="buttons" class="buttons">
        <p>Quick links can be CRS Codes or Headcodes</p>
        {#each qlData as link}
            <input class="qlInput" type="text" value={link} />
        {/each}
        <button on:click={addQlBox} id="qlAdd">+</button>
    </div>
    <button on:click={save}>{@html saveButton}</button>
    <button on:click={clearQl}>Clear</button>
</Island>

<style>
    p {
        margin-bottom: 0;
    }
    #qlAdd {
        width: 40px;
    }
    .buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 90%;
        margin: auto;
        padding-top: 5px;
    }
    input {
        flex: 1;
        width: 20%;
        min-width: 50px;
        margin: 5px;
        border: none;
        border-radius: 20px;
        padding: 5px;
        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
        font-size: 16px;
        font-weight: 400;
        text-decoration: none;
        text-align: center;
        text-transform: uppercase;
        box-shadow: var(--box-shadow);
    }
    button {
        width: 30%;
        margin-bottom: 5px;
        margin-top: 10px;
        border: none;
        border-radius: 20px;
        padding: 5px;
        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
        font-size: 16px;
        font-weight: 400;
        background-color: var(--island-button-color);
        color: var(--island-link-color);
        box-shadow: var(--box-shadow);
    }
</style>
