<script lang="ts">
  import { FloatingLabelInput, Button } from "flowbite-svelte";
  import browser from "webextension-polyfill";
  import { onMount } from "svelte";
  
  let apiKey: string;
  let truncatedKey: string;
  let keyWrong: false;
  
  const storeAPIKey = async (event: MouseEvent) => {
    const key = document.getElementById("eleven_labs_key") as HTMLInputElement
    
    if (key?.value) {
      const providedKey = key?.value
   
      keyWrong = false;
      const response = await fetch( "https://api.elevenlabs.io/v1/user", 
      {
        headers: { "xi-api-key": providedKey }
      })
      if (response.status === 200) {
        truncatedKey = providedKey.slice(0, 1) + "..." + providedKey.slice(-3)
        await browser.storage.local.set({
          eleven_labs_key: providedKey,
          truncated_eleven_labs_key: truncatedKey
        })
      } else {
        keyWrong = true
      }
  }
</script>    

{#if truncatedKey}
  <p>
    (Currently saved key: {truncatedKey})
  <p>
{/if}

{#if keyWrong}
  <p>
    Apologies; That key was incorrect.
  </p>
{/if}

<div class="mb-2">
    <FloatingLabelInput bind:value={apiKey} 
      id="eleven_labs_key" name="apiKey" type="text" label="Elevenlabs API Key">
      Elevenlabs API Key
    </FloatingLabelInput>
</div>
<div>
    <Button on:click={storeAPIKey}>Save</Button>
</div>
Options
