<script setup lang="ts">
import HeaderLinks from './HeaderLinks.vue';
import SiteOptions from './site_options/SiteOptions.vue';
import StickyHeader from './StickyHeader.vue';

const asciiLines = [
  "░█▀█░█▀▄░█▀█░█▀█░█▀▄░█▀█░▀█▀░█▀▀",
  "░█▀█░█▀▄░█▀█░█░█░█▀▄░█░█░░█░░█░█",
  "░▀░▀░▀░▀░▀░▀░▀░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀"
];

const revealedLines = ref<number>(0);
let asciiTimer: ReturnType<typeof setInterval> | null = null;
const HAS_ANIMATED_KEY = 'ascii-animated';

function startAsciiAnimation() {
  if (sessionStorage.getItem(HAS_ANIMATED_KEY)) {
    revealedLines.value = asciiLines.length;
    return;
  }

  const delay = 400;
  let count = 0;
  
  asciiTimer = setInterval(() => {
    count++;
    revealedLines.value = count;
    if (count >= asciiLines.length) {
      clearInterval(asciiTimer!);
      asciiTimer = null;
      sessionStorage.setItem(HAS_ANIMATED_KEY, '1');
    }
  }, delay);
}

onMounted(() => {
  startAsciiAnimation();
});

onBeforeUnmount(() => {
  if (asciiTimer) clearInterval(asciiTimer);
});
</script>

<template>
    <div class="header">
        <div class="container">
            <div class="header-container website">
                <pre v-if="revealedLines > 0" class="ascii-title" aria-hidden="true">{{ asciiLines.slice(0, revealedLines).join('\n') }}</pre>
                <HeaderLinks></HeaderLinks>
            </div>
        </div>
        <div class="header-container">
        </div>
        <div class="container">
            <SiteOptions></SiteOptions>
        </div>
    </div>
    <StickyHeader></StickyHeader>
</template>

<style lang="scss" scoped>
.header {
    position: relative;
    margin-top: 30px;
    user-select: none;
    display: flex;
    justify-content: space-between;
}

.header-container {
    &.website {
        display: flex;
        flex-direction: column;
        gap: 8px;

        @media screen and (max-width: 600px) {
            margin-top: 20px;
        }
    }
}

.header-container {
    position:relative;
    margin-bottom: 20px;
}

.ascii-title {
    font-family: 'Hurmit', monospace;
    color: var(--color-link);
    text-shadow: 0 0 8px var(--color-link), 0 0 4px var(--color-link);
    font-size: clamp(0.35rem, 1.2vw, 0.65rem);
    line-height: 1;
    letter-spacing: -0.1ch;
    margin: 0;
    white-space: pre;
    min-height: clamp(1.05rem, 3.6vw, 1.95rem);
}

@media screen and (max-width: 600px) {
    .ascii-title {
        font-size: clamp(0.28rem, 1.8vw, 0.5rem);
        line-height: 1;
        letter-spacing: -0.1ch;
    }
}
</style>