<!-- Коллекция видео («Избранное», «Смотреть позже»): счётчик, сортировка, сетка карточек -->
<template>
  <div class="library-collection">
    <UiSectionTitle
      :title="title"
      :count="total"
      :icon="icon"
      class="library-collection__title"
    />

    <SectionNavLinks
      :items="sortCollections"
      class="library-collection__sort"
      theme="secondary"
    />

    <div
      v-if="pageItems.length > 0"
      class="library-collection__grid"
    >
      <CardVideo
        v-for="(item, index) in pageItems"
        :key="item.guid"
        :card="item"
        :priority="index < 4"
        :loading="index < 4 ? 'eager' : 'lazy'"
      />
    </div>

    <UiEmptyState
      v-else
      without-reset
    />

    <UiPagination
      v-if="allPages > 1"
      :key="`pagination-${allPages}`"
      :total="allPages"
      class="library-collection__pagination _pagination"
      arrow-icon
    />
  </div>
</template>

<script setup lang="ts">
import { sortCollections } from '../../lib';
import type { IVideoCard } from '../../types';

const PER_PAGE = 24;

const props = defineProps<{
  /** Ролики коллекции в порядке добавления, свежие первыми — «недавние» это сортировка по умолчанию */
  items: IVideoCard[]
  title: string
  icon: string
}>();

const route = useRoute();

const sortedItems = computed(() => route.query['sort'] === 'az'
  ? [ ...props.items ].sort((a, b) => a.title.localeCompare(b.title))
  : props.items);

const total = computed(() => sortedItems.value.length);
const allPages = computed(() => Math.ceil(total.value / PER_PAGE));

const pageItems = computed(() => {
  const page = Math.min(Math.max(Number(route.query['page']) || 1, 1), allPages.value || 1);
  return sortedItems.value.slice((page - 1) * PER_PAGE, page * PER_PAGE);
});
</script>

<style lang="scss">
.library-collection__title {
  margin-bottom: 24px;
}

.library-collection__sort {
  margin-bottom: 32px;
}

.library-collection__grid {
  @include video-card-grid;

  position: relative;
}

.ui-pagination.library-collection__pagination {
  margin-top: auto;
  margin-bottom: 40px;
}
</style>
