<!-- Сетка видео с 3-уровневой ленивой гидрацией; скрытие первой строки на мобиле -->
<template>
  <div
    :class="[
      {'--first-hidden': hideFirstRow},
    ]"
    class="grid-videos"
  >
    <slot name="grid-start"/>
    <CardVideo
      v-for="(item, index) in eagerItems"
      :key="`video-${item.guid}`"
      :card="item"
      :priority="priority && index < eagerCount"
      :loading="!related ? 'eager' : 'lazy'"
      :top-chips="topChips"
      :playlist-id="playlistId"
      :playlist="playlist"
      class="grid-videos__card"
    />
    <slot/>
    <LazyCardVideo
      v-for="item in idleItems"
      :key="`video-idle-${item.guid}`"
      :card="item"
      :top-chips="topChips"
      :playlist-id="playlistId"
      :playlist="playlist"
      class="grid-videos__card"
      loading="lazy"
      hydrate-on-idle
    />
    <LazyCardVideo
      v-for="item in lazyItems"
      :key="`video-lazy-${item.guid}`"
      :card="item"
      :top-chips="topChips"
      :playlist-id="playlistId"
      :playlist="playlist"
      :hydrate-on-visible="HYDRATE_MARGIN"
      class="grid-videos__card"
      loading="lazy"
    />
    <slot name="grid-end"/>
  </div>
</template>

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

const IDLE_COUNT = 4;
/** Запас гидрации до появления карточки на экране: без него обработчики превью не успевают появиться к тапу. */
const HYDRATE_MARGIN = { rootMargin: '300px' };

const props = defineProps<{
  items: Array<IVideoCard>
  hideFirstRow?: boolean
  priority?: boolean
  related?: boolean
  playlist?: boolean
  playlistId?: string
  topChips?: string[]
}>();

const isMobile = useState<boolean>('isMobile');
const eagerCount = computed(() => isMobile.value ? 4 : 12);

const eagerItems = computed(() => props.items.slice(0, eagerCount.value));
const idleItems = computed(() => props.items.slice(eagerCount.value, eagerCount.value + IDLE_COUNT));
const lazyItems = computed(() => props.items.slice(eagerCount.value + IDLE_COUNT));
</script>

<style lang="scss">
.grid-videos {
  @include video-card-grid;

  position: relative;
}

.grid-videos__idle,
.grid-videos__lazy {
  display: contents;
}

.grid-videos.--first-hidden .grid-videos__card:is(:nth-child(-n+2)) {
  @include from-br(md) {
    display: none;
  }
}
</style>
