<!-- Панель навигации (сортировка/фильтры) с активными чипсами и скроллом -->
<template>
  <div class="section-nav-links">
    <UiLink
      v-for="(item, index) in items"
      :key="`sort-item-${index}`"
      :to="item.key ? linkTo(item, index) : generateLink(item.value)"
      :active="isActive(item, index)"
      :size="size"
      :theme="theme"
      class="section-nav-links__button"
    >
      <template v-if="item.shortTitle">
        <span class="_to-sm">{{ t(item.shortTitle) }}</span>
        <span class="_from-sm">{{ t(item.title) }}</span>
      </template>
      <template v-else>{{ t(item.title) }}</template>
    </UiLink>
  </div>
</template>

<script setup lang="ts">
import type { ButtonSizes, INavLinkItem, ButtonThemes } from '../../types';

defineProps<{
  items: INavLinkItem[]
  theme?: ButtonThemes
  size?: ButtonSizes
}>();

const { t } = useI18n();
const route = useRoute();

const { generateLink } = useGenerateLink();

function linkTo(item: INavLinkItem, index: number) {
  if (index === 0) {
    const query = { ...route.query };
    delete query[item.key || 'sort'];
    delete query['page'];
    return { path: route.path, query: query };
  }

  if (!item.key) return { query: { ...route.query } };

  const oldQuery = { ...route.query };
  delete oldQuery['page'];

  return {
    query: {
      ...oldQuery,
      [item.key]: item.value
    }
  };
}

function isActive(item: INavLinkItem, index: number) {
  if (item.key && !route.query[item.key] && index === 0) {
    return true;
  }

  if (item.key) {
    return route.query[item.key?.toLowerCase() || ''] === String(item.value)?.toLowerCase();
  }

  return route.path === generateLink(item.value);
}
</script>

<style lang="scss">
.section-nav-links {
  $gap: 4px;

  display: flex;
  gap: 8px;

  @include to-br(sm) {
    overflow: auto;
    max-width: calc(100vw - var(--container-padding-inline) * 2);
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
