<script lang="ts">
  import { fade } from "svelte/transition";
  import LinkCard from "./Home/LinkCard.svelte";
  import SetupInstructions from "./Home/SetupInstructions.svelte";
  import { DISCORD_INVITE, FADE_IN, FADE_OUT } from "../libs/config";
  import { USER } from "../libs/sdk.js";
  import type { AquaNetUser } from "../libs/generalTypes";
  import StatusOverlays from "../components/StatusOverlays.svelte";
  import ActionCard from "../components/ActionCard.svelte";
  import { t } from "../libs/i18n";

  USER.ensureLoggedIn();

  let me: AquaNetUser
  let error = ""

  let tab = 0;
  let tabs = [t('home.nav.portal'), t('home.nav.link-card'), t('home.nav.game-setup')]

  USER.me().then((m) => me = m).catch(e => error = e.message)
</script>

<main class="content">
<!--  <h2 class="outer-title">&nbsp;</h2>-->
  <nav class="tabs">
    {#each tabs as t, i}
      <div class="clickable"
           class:active={tab === i}
           on:click={() => tab = i}
           on:keydown={(e) => e.key === "Enter" && (tab = i)}
           role="button" tabindex={i}>{t}
      </div>
    {/each}
  </nav>

  {#if tab === 0}
    <div out:fade={FADE_OUT} in:fade={FADE_IN} class="action-cards">
      <ActionCard color="255, 192, 203" icon="solar:card-bold-duotone" on:click={() => tab = 1}>
        {#if me && me.cards.length > 1}
          <h3>{t('home.manage-cards')}</h3>
          <span>{t('home.manage-cards-description')}</span>
        {:else if me}
          <h3>{t('home.link-card')}</h3>
          <span>{t('home.link-cards-description')}</span>
        {/if}
      </ActionCard>

      <ActionCard color="82, 93, 233" icon="ic:baseline-discord" on:click={() => window.location.href = DISCORD_INVITE}>
        <h3>{t('home.join-discord')}</h3>
        <span>{t('home.join-discord-description')}</span>
      </ActionCard>

      <ActionCard on:click={() => tab = 2} icon="uil:link-alt">
        <h3>{t('home.setup')}</h3>
        <span>{t('home.setup-description')}</span>
      </ActionCard>
    </div>
  {:else if tab === 1}
    <div out:fade={FADE_OUT} in:fade={FADE_IN}>
      <LinkCard/>
    </div>
  {:else if tab === 2}
    <div out:fade={FADE_OUT} in:fade={FADE_IN}>
      <SetupInstructions/>
    </div>
  {/if}
</main>

<StatusOverlays {error} loading={!me}/>

<style lang="sass">
  @import "../vars"

  .tabs
    display: flex
    gap: 1rem

    div
      &.active
        color: $c-main

  h3
    font-size: 1.3rem
    margin: 0

  .action-cards
    display: flex
    flex-direction: column
    gap: 1rem
</style>
