<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>
