<!-- Svelte 4.2.11 -->

<script lang="ts">
  import { slide, fade } from "svelte/transition";
  import { USER } from "../../libs/sdk";
  import type { UserMe } from "../../libs/generalTypes";
  import { codeToHtml } from 'shiki'
  import { AQUA_CONNECTION, AQUA_HOST } from "../../libs/config";

  let user: UserMe
  let keychip: string;
  let keychipCode: string;
  let getStartedRequesting = false;

  USER.me().then((u) => {
    user = u;
  });

  function getStarted() {
    if (getStartedRequesting) return;

    getStartedRequesting = true;
    USER.keychip().then(k => {
      getStartedRequesting = false;
      keychip = k;
      codeToHtml(`
[dns]
default=${AQUA_CONNECTION}

[keychip]
enable=1
; This is your unique keychip, do not share it with anyone
id=${keychip.slice(0, 4)}-${keychip.slice(4)}1337`.trim(), {
        lang: 'ini',
        theme: 'rose-pine',
      }).then((html) => {
        keychipCode = html;
      });
    });
  }
</script>

<div class="setup-instructions">
  <h2>Connection Setup</h2>
  <p>
    Welcome! If you own an arcade cabinet or game setup,
    please follow the instructions below to set up the connection with AquaDX.
  </p>
  <blockquote>
    We assume that you already have the required files and can run the game (e.g. ROM and segatools)
    that come with the cabinet or game setup.
    If not, please contact the seller of your device for the required files, as we will not provide them for copyright reasons.
  </blockquote>

  {#if user}
    <div transition:slide>
      {#if !keychip && !keychipCode}
        <div class="no-margin" out:fade={{ duration: 300 }}>
          <button class="emp" on:click={getStarted}>Get started</button>
        </div>
      {:else}
        <div class="no-margin" in:fade={{ delay: 300 }}>
          <p>
            Please edit your segatools.ini file and modify the following lines:
          </p>

          <div class="code">
            {@html keychipCode}
          </div>
        </div>
      {/if}
    </div>
  {:else}
    <p>Loading...</p>
  {/if}
</div>

<style lang="sass">
  :global(pre.shiki)
    background-color: transparent !important

    :global(code)
      counter-reset: step
      counter-increment: step 0

    :global(code .line::before)
      content: counter(step)
      counter-increment: step
      width: 1rem
      margin-right: 1.5rem
      display: inline-block
      text-align: right
      color: rgba(115,138,148,.4)

</style>