<script setup lang="ts">
const localePath = useLocalePath()
const route = useRoute()

const scrollTargets: Record<string, string> = {
    'index': '#top',
    'blog': '#scroll-blog',
    'contact': '#scroll-contact',
    'art': '#scroll-art'
}

const isHome = computed(() => route.path === localePath('index'))

function isActive(targetKey: string): boolean {
    if (targetKey === 'index') return isHome.value
    const targetPath = localePath(targetKey)
    return route.path === targetPath
}

function getToPath(targetKey: string): string {
    if (isHome.value) {
        const targetId = scrollTargets[targetKey] || 'top'
        return targetId.substring(1) !== '' ? '#' + targetId.substring(1) : '/'
    }
    return localePath(targetKey === 'index' ? 'index' : targetKey)
}
</script>

<template>
    <div class="tui-tabs">
        <NuxtLink :to="getToPath('index')" class="tui-tab" :class="{ 'tui-tab-active': isActive('index') }">
            <span class="tab-sep" v-if="false">│</span>
            <span class="tab-label">/</span>
        </NuxtLink>
        <NuxtLink :to="getToPath('blog')" class="tui-tab" :class="{ 'tui-tab-active': isActive('blog') }">
            <span class="tab-sep">│</span>
            <span class="tab-label">/{{ $t('header.links.blog') }}</span>
        </NuxtLink>
        <NuxtLink :to="getToPath('art')" class="tui-tab" :class="{ 'tui-tab-active': isActive('art') }">
            <span class="tab-sep">│</span>
            <span class="tab-label">/{{ $t('header.links.art') }}</span>
        </NuxtLink>
        <NuxtLink :to="getToPath('contact')" class="tui-tab" :class="{ 'tui-tab-active': isActive('contact') }">
            <span class="tab-sep">│</span>
            <span class="tab-label">/{{ $t('header.links.contact') }}</span>
        </NuxtLink>
    </div>
</template>

<style lang="scss" scoped>

.tui-tabs {
  display: inline-flex;
  background-color: var(--color-background-fore);
  border: 1px solid var(--color-border-color);
  box-shadow: inset 2px -2px 0px 0px rgba(0,0,0,0.2);
}

.tui-tab {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: 4px 12px;
    font-family: 'Hurmit', monospace;
    font-size: 0.85rem;
    color: var(--color-text);
    text-shadow: none;
    transition: all 0.1s steps(2, end);
    border-right: 1px solid var(--color-border-color);
    
    &:last-child {
        border-right: none;
    }
    
    .tab-sep {
        color: var(--color-text);
        opacity: 0.3;
        margin-right: 8px;
        font-size: 0.75rem;
    }

    &:hover {
        background-color: var(--color-hover);
        text-shadow: none;
    }
}

.tui-tab-active {
    color: var(--color-background-fore);
    background-color: var(--color-link);
    text-shadow: 0 0 8px rgba(255,255,255,0.3);
    
    .tab-sep {
        color: var(--color-background-fore);
        opacity: 0.6;
    }
}

.disabled {
    color: #aaaaaa77;
}

@media screen and (max-width: 900px) {
  .tui-tab {
      padding: 3px 8px;
      font-size: 0.75rem;
      
      .tab-sep {
          margin-right: 4px;
      }
  }
}

@media screen and (max-width: 600px) {
  .tui-tab {
      padding: 3px 5px;
      font-size: 0.7rem;

      .tab-sep {
          margin-right: 3px;
      }
  }
}

@media screen and (max-width: 480px) {
    .tui-tabs {
        flex-wrap: wrap;
    }

    .tui-tab {
        flex: 1;
        justify-content: center;
        min-height: 36px;
        padding: 6px 8px;
        white-space: nowrap;
    }
}

</style>
