<script>
    import Island from "$lib/islands/island.svelte";
    import { ql } from "$lib/stores/quick-links.js";
    export let variables = {
      title: "Quick Links",
    };
  
    let qlData =[]
    $: {
        qlData = $ql;
        console.log(qlData);
    }

    let saveButton = "Save"

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

    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 = []
      for (let item of inputs) {
        let text = item?.value;
        if (text !== '') {
            inputLinks.push(text);
        }
      }
      console.log(inputLinks)
      ql.set(inputLinks)
      saveButton = "&#10004;"
      await timeout(3000);
      saveButton = "Saved"
    }

    function clearQl() {
        ql.set([]);
        saveButton = "Saved"
    }

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

    function handleClick(event) {
      // 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={saveQl}>{@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;
    }
    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(--main-bg-color);
        color: var(--link-color);
    }
</style>