<template>
  <div class="grouped _page _container">
    <UiBreadcrumbs
      :items="breadcrumbs"
      class="_breadcrumbs"
    />

    <UiSectionTitle
      :title="h1"
      :count="totalCount"
      class="grouped__title"
      icon="grid"
    />

    <div class="_nav-filter">
      <CategoryNav
        v-if="categoriesGroupByLetter"
        :items="categoriesGroupByLetter as IChipsItem[]"
        hide-on-mobile
      />
      <div
        v-else
        class="categories__loading _loading"
      />
    </div>

    <div
      v-if="groupsCategories && groupsCategories.length > 0"
      class="grouped__category-wrapper"
    >
      <CategoryGroup
        v-for="(item, index) in groupsCategories"
        :key="`group-category-${index}`"
        :items="item?.categories"
        :title="item.title"
        :icon="item.icon"
        class="grouped__category-section"
      />
      <UiLink
        :to="generateLink('/categories/all')"
        class="grouped__category-all"
        theme="secondary"
      >{{ t('show_all') }}
      </UiLink>
    </div>

    <SectionSeoText
      :text="t('grouped_footer_text')"
      links-link="grouped_footer_links"
    />
  </div>
</template>

<script setup lang="ts">
import type { IBreadcrumbItem, IChipsItem } from '../../types';
import { CategoriesApiService } from '../../services/api/categories.service';
import { AsyncData } from '../../runtime';

const [
  { data: categoriesGroupByLetter },
  { data: groupsCategories },
] = await Promise.all([
  useFetchCategoriesGroupByLetter(AsyncData.GroupsCategoriesByLetterChips, CategoriesApiService.getListGroupedByLetterChips),
  useFetchGroupsCategories(CategoriesApiService.getGroupsCategories),
]);

const { t } = useI18n();

const { generateLink } = useGenerateLink();

const pagePureName = useGetPureRouteName();
const { meta, h1 } = useMeta({ t, pageKey: pagePureName, brandName: useAppConfig().brandName });

watchEffect(() => {
  useHead(meta.value);
});

const totalCount = computed(() =>
  groupsCategories.value?.reduce((sum, item) => sum + (item.categories?.length || 0), 0) || 0
);

const breadcrumbs = [
  {
    name: `${t('navigation.main')}`,
    to: '/',
  },
  {
    name: `${t('categories')}`,
  },
] as IBreadcrumbItem[];
</script>

<style lang="scss">
.grouped__popular {
  display: grid;
  row-gap: 8px;

  @include from-br(sm) {
    row-gap: 16px;
  }
}

.grouped__title {
  margin-bottom: 16px;
}

.grouped__popular-models {
  display: flex;
  column-gap: 4px;
  align-items: center;
}

.grouped__popular-highlight {
  @include from-br(sm) {
    padding-right: 4px;
    border-right: 1px solid $grouped-highlight-border;
  }
}

.grouped__loading {
  --size: 24px;

  min-height: 32px;
}

.grouped__category-icon {
  color: $grouped-category-icon;
}

.grouped__category-wrapper {
  display: grid;
  row-gap: 16px;
}

.grouped__category-all {
  justify-self: center;
  margin-block: 16px;

  @include from-br(sm) {
    grid-column: 1/-1;
  }
}

.grouped__footer-text {
  @include font-sm;

  color: $grouped-footer-text;
  margin-top: 32px;
}

.grouped__category-section {
  padding-bottom: 16px;
  border-bottom: 1px solid $grouped-section-border;
}

.grouped__category-section:first-child {
  padding-top: 0;
}

.grouped__category-section:last-child {
  border-bottom: none;
}

.grouped__footer-models {
  display: grid;
  row-gap: 8px;
  padding-top: 8px;

  @include from-br(sm) {
    row-gap: 16px;
  }
}
</style>
