<template>
  <nav role="navigation" aria-label="main navigation">
    <div class="signet-logo">
      <RouterLink to="/">
        <span>
          <template v-for="(element, i) in logoElements" v-bind:key="i">
            <span :style="`color: ${element.color}`">{{ element.letter }}</span>
          </template>
        </span>
      </RouterLink>
    </div>
  </nav>

  <div id="content">
    <RouterView v-slot="{ Component }">
      <Suspense>
        <Component :is="Component"/>

        <template #fallback>
          <div
            style="height: 90vh">
            <span style="font-size: 1.25em; color: greenyellow; margin: auto 0">
              Loading...
            </span>
          </div>
        </template>
      </Suspense>
    </RouterView>
  </div>

  <footer>
    <div>
      Proudly made in Michigan
      <div></div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import { useSessionStorage } from '@vueuse/core';
import store from '@/store';
import {
  computed,
  ref,
} from 'vue';
import jwtDecode from 'jwt-decode';
import { Claims } from '@/api/types';

const userData = ref({
  username: '',
  privileges: -1,
  exp: -1,
} as Claims);

const state = useSessionStorage('jwt', { token: '' });
if (state.value.token) {
  store.commit('setToken', state.value.token);
  userData.value = jwtDecode<Claims>(state.value.token);
}

const hasToken = computed(() => !!store.getters.getToken);

interface LogoElement {
  letter: string;
  color: string;
}

const gradientize = (text: string, start: string, end: string): LogoElement[] => {
  const extractChannels = (hex: string): { 'r': number, 'g': number, 'b': number } => {
    const h = ref(hex);
    if (h.value.startsWith('#')) {
      h.value = hex.slice(1);
    } else {
      h.value = hex;
    }
    const [r, g, b] = [
      parseInt(h.value.slice(0, 2), 16),
      parseInt(h.value.slice(2, 4), 16),
      parseInt(h.value.slice(4, 6), 16),
    ];

    return {
      r,
      g,
      b,
    };
  };
  const composeHex = (r: number, g: number, b: number) => {
    const padIfNeeded = (hex: string) => (hex.length === 1 ? `0${hex}` : hex);
    const [rHex, gHex, bHex] = [
      `${padIfNeeded(r.toString(16))}`,
      `${padIfNeeded(g.toString(16))}`,
      `${padIfNeeded(b.toString(16))}`,
    ];
    return `#${rHex}${gHex}${bHex}`;
  };
  const logoElements = ref([] as LogoElement[]);
  const startChannels = extractChannels(start);
  const endChannels = extractChannels(end);
  const differences = {
    r: endChannels.r - startChannels.r,
    g: endChannels.g - startChannels.g,
    b: endChannels.b - startChannels.b,
  };

  const [r, g, b] = [ref(startChannels.r), ref(startChannels.g), ref(startChannels.b)];
  for (let i = 0; i < text.length; i += 1) {
    r.value += differences.r / text.length;
    g.value += differences.g / text.length;
    b.value += differences.b / text.length;
    logoElements.value.push({
      color: composeHex(Math.round(r.value), Math.round(g.value), Math.round(b.value)),
      letter: text[i],
    });
  }
  return logoElements.value;
};

const logoElements: LogoElement[] = gradientize('Beignet', '#f23525', '#e99406');
</script>

<style lang="stylus">
@import "assets/styles/general.styl"

#content
  margin-top 1.5em
  min-height 80vh

#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale

html, body
  padding 0
  margin 0

body
  min-height 100vh
  color text-color
  background-color bg-color

footer
  color #707070
  padding 12px
  margin-top 10px

  & *
    vertical-align middle
    text-align center

nav
  background-color bg-color
  padding 0.15em 0.7em
  filter signet-shadow

  a
    text-decoration none

.signet-logo
  font-family Paytone
  letter-spacing 1px
  font-size 3em

.michigan-icon
  display inline-block
  width 28px
  height 28px
  background-image url("./assets/icons8-michigan-50.png")
  background-repeat no-repeat
  background-position center
  background-size 28px
  margin-left 4px

.layout-section
  margin 0 auto
  width 61.8034%

  @media screen and (max-width: 1080px)
    width 82%

  @media screen and (max-width: 860px)
    width 96%

@font-face
  font-family Paytone
  src url("./assets/PaytoneOne-Regular.ttf")

@font-face
  font-family "Passion One"
  src url("./assets/PassionOne-Regular.ttf")

@font-face
  font-family "Passion One Bold"
  src url("./assets/PassionOne-Bold.ttf")
</style>
