<!-- Страница каталога видео: категории, сортировка, фильтр, грид, пагинация -->
<template>
  <div class="view-videos _page _container">
    <header class="view-videos__header">
      <LazyUiExpandRow
        v-if="topRandomCategories && !isFirstPage"
        :items="topRandomCategories"
        class="view-videos__categories"
        hydrate-on-idle
      >
        <template #prepend>
          <UiChips
            is-link
            :item="{
              title: t('all_categories'),
              icon: 'grid',
              value: 'all',
              prefix: 'categories'
            }"
          />
        </template>
      </LazyUiExpandRow>

      <UiSectionTitle
        v-if="title"
        :count="data?.total && $n(data?.total, 'compact')"
        :title="title"
        :img="flagImg"
        class="view-videos__title"
        icon="video-camera"
      />
      <LazySectionToolbar
        :sort-items="sortItems"
        class="view-videos__options"
        hydrate-on-idle
      />
    </header>

    <GridVideos
      v-if="data && data.items && data.items?.length > 0"
      :items="data.items"
      :class="{'_loading': status === 'pending'}"
      class="view-videos__grid"
      id="anchor"
      priority
    >
      <template #grid-end>
        <LazyAdvNativeBottom
          v-if="featureFlags.AdsNativeEnabled"
          hydrate-on-visible
        />
      </template>

      <LazySectionSwiperCards
        v-if="dataModels && dataModels?.items && dataModels?.items.length > 0"
        :items="modelsRoundCards"
        :all-link="`/models`"
        :all-link-text="$t('show_all_models')"
        class="view-videos__popular-models"
        placeholder-avatar="/img/model-placeholder.webp"
        hydrate-on-visible
      />
    </GridVideos>

    <div
      v-else-if="status === 'pending'"
      class="view-videos__loading _loading"
    />

    <UiEmptyState v-else/>

    <LazyUiPagination
      v-if="data"
      arrow-icon
      :key="`pagination-${data.allPages}`"
      :total="data.allPages"
      class="view-videos__pagination _pagination"
      hydrate-on-visible
    />

    <SectionCategoriesIsland
      v-if="!hideCategories && isFirstPage"
      :footer-text="footerText"
      :footer-links-link="footerLinksLink"
    />
  </div>
</template>

<script setup lang="ts">
import type {
  IChipsItem,
  IModelCard,
  INavLinkItem,
  IVideoCard,
  PaginatedResponse
} from '../../types';
import { convertModelToRoundCard } from '../../runtime';

const featureFlags = useRuntimeConfig().public.featureFlags;

const props = defineProps<{
  data: PaginatedResponse<IVideoCard> | undefined
  status: string
  hideCategories?: boolean
  title?: string
  footerText?: string
  footerLinksLink?: string
  dataModels: PaginatedResponse<IModelCard> | null
  topRandomCategories: IChipsItem[] | null
  flagImg?: string
  sortItems?: INavLinkItem[]
}>();

const { t } = useI18n();

const route = useRoute();

const isFirstPage = computed(() => !route.query[ 'page' ] || route.query[ 'page' ] === '1');

const modelsRoundCards = computed(() =>
    props.dataModels?.items?.map(convertModelToRoundCard) || []
);
</script>

<style lang="scss">
.ui-pagination.view-videos__pagination {
  margin-top: auto;
  margin-bottom: 40px;
}

.view-videos__title.--categories {
  padding-top: 32px;
  border-top: 1px solid $page-videos-title-border;
}

.view-videos__grid {
  margin-bottom: 40px;
}

.view-videos__footer-links {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid $page-videos-footer-border;

  @include from-br(sm) {
    padding-top: 16px;
  }
}

.view-videos__title {
  margin-bottom: 16px;
}

.view-videos__options {
  margin-bottom: 24px;
}

.view-videos__options:has(.ui-expand-row) {
  margin-bottom: 16px;
}

.view-videos__popular-models {
  grid-row: 4;
  grid-column: 1/-1;

  @include to-br(sm) {
    margin-block: 40px;
  }

  @include from-br(sm) {
    padding-block: 16px;
  }
}

.view-videos__header {
  display: grid;
}

.view-videos__categories {
  display: grid;
  margin-bottom: 12px;

  @include from-br(sm) {
    display: flex;
    grid-column: 1/-1;
    grid-row: 3;
    flex-wrap: wrap;
    margin-bottom: 24px;
  }
}

.view-videos__all-categories {
  padding: 7px 15px;
  border: 1px solid $page-videos-categories-border;

  @include to-br(sm) {
    height: 24px;
    min-height: unset;
    padding-block: 0;
    padding-inline: 8px;
  }
}

.view-videos__all-categories .ui-icon {
  color: $page-videos-categories-icon;
}

.view-videos__models-by-tag {
  margin-bottom: 40px;
}

.view-videos__loading {
  height: 100%;
  min-height: 30vh;
}
</style>
