<!-- Тулбар: сортировка, фильтр категорий, счётчик видео -->
<template>
  <div class="section-toolbar">
    <div class="section-toolbar__wrapper">
      <SectionNavLinks
        :items="sortItems || sortItemsDefault"
        class="section-toolbar__sort"
        theme="secondary"
      />
      <slot>
        <LazyFilterMain
          :scheme="filterScheme"
          :duration-items="selectDurationItems"
          :added-items="selectAddedItems"
          class="section-toolbar__filter"
          button-theme="primary"
          @open="load"
        />
      </slot>
      <slot name="append"/>
    </div>
    <FilterVideosChips
      v-if="!isModelFilter"
      :scheme="filterScheme"
      :added-items="selectAddedItems"
      :duration-items="selectDurationItems"
    >
      <span
        v-if="total"
        class="section-toolbar__count"
      >
        <UiLabel
          :text="total"
          theme="bordered"
          class="section-toolbar__count _to-sm"
        >
          <UiIcon
            name="video-camera"
            size="16"
          />
        </UiLabel>
      </span>
    </FilterVideosChips>
  </div>
</template>

<script setup lang="ts">
import { sortItemsDefault, selectDurationItems, selectAddedItems } from '../../lib';
import { convertString } from '../../runtime';
import type { INavLinkItem, IFilterScheme } from '../../types';
import { CategoriesApiService } from '../../services/api/categories.service';

defineProps<{
  isModelFilter?: boolean
  sortItems?: INavLinkItem[]
  total?: number
}>();

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

const { data: lazyGroups, load } = useFetchGroupsCategoriesLazy(CategoriesApiService.getGroupsCategories);

if (route.query.categories) {
  await load();
}

const filterScheme = computed<IFilterScheme[]>(() => {
  const groups = lazyGroups.value;
  if (!groups) return [];
  return groups
    .map(item => ({
      label: item.title,
      name: item.name,
      title: item.title,
      icon: item.icon,
      placeholder: t('choose_category'),
      items: item.categories?.map(subItem => ({
        title: convertString().toCapitalize(subItem.title),
        value: subItem.name,
      })),
    }))
    .filter(item => item?.items?.length > 0);
});
</script>

<style lang="scss">
.section-toolbar {
  display: grid;
  row-gap: 24px;
}

.section-toolbar__wrapper {
  display: flex;
  gap: 12px;
  row-gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  max-width: 100vw;
  flex-shrink: 0;
  margin-inline: calc(-1 * var(--container-padding-inline));
  overflow: auto;
  padding-left: var(--container-padding-inline);

  &::-webkit-scrollbar {
    display: none;
  }

  @include from-br(sm) {
    padding-right: 2px;
    max-width: unset;
    padding-left: 0;
    margin-inline: 0;
  }
}

.section-toolbar__filter {
  padding-left: 12px;
}

.section-toolbar__filter:has(.ui-btn) {
  position: relative;

  &::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    content: '';
    width: 1px;
    height: 24px;
    background-color: $options-panel-filter-border;
  }
}

.section-toolbar__count {
  @include to-br(sm) {
    padding-right: 4px;
    border-right: 1px solid $options-panel-count-border;
  }
}
</style>
