<template>
  <ViewVideos
    v-if="data"
    :data="data"
    :status="status"
    :title="h1"
    :data-models="dataModels"
    :top-random-categories="topRandomCategories"
    :footer-text="t('footer_text')"
    :flag-img="countryFlagImg"
    footer-links-link="footer_links"
  />
  <div
    v-else
    class="_loading"
  />
</template>

<script setup lang="ts">
import { convertQueryCategories, convertString, AsyncData } from '../runtime';
import { VideosApiService } from '../services/api/videos.service';
import { ModelsApiService } from '../services/api/models.service';
import { CategoriesApiService } from '../services/api/categories.service';
import { sortItemsDefault } from '../lib';
import type { IChipsItem } from '../types';

const { t } = useI18n();

const pageName = useGetPureRouteName();
const route = useRoute();

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

const [
  { data, status },
  { data: dataModels },
] = await Promise.all([
  useFetchVideos(VideosApiService.getListByNiche),
  useFetchTopModels(ModelsApiService.getTop, 24, AsyncData.TopModelsMore, String(pageName)),
]);

// top-random-категории показываются только на страницах пагинации (page 2+);
// на главной (page 1) их место занимает A-Z island — не фетчим и не кладём в payload зря
const topRandomCategories = ref<IChipsItem[] | null>(null);
const loadTopRandomCategories = async () => {
  if (isFirstPage.value || topRandomCategories.value) return;
  const { topRandomCategories: fetched } = await useFetchTopRandomCategories(
    CategoriesApiService.getTopRandom,
    String(pageName),
  );
  topRandomCategories.value = fetched.value;
};
await loadTopRandomCategories();
watch(isFirstPage, loadTopRandomCategories);

const routeQueryCategories = computed(() => {
  if (route.query['categories']) {
    const text = convertQueryCategories(route);
    return `${convertString().toCapitalize(text)} `;
  }
  return '';
});

const clientCountry = useClientCountry();

// Страна в заголовке уместна только на дефолтной сортировке (в остальных шаблонах
// её нет) — при явной сортировке гасим и подпись, и флаг.
const isCountryShown = computed(() => !route.query['sort'] && !!clientCountry.name.value);

const countryName = computed(() => (isCountryShown.value ? clientCountry.name.value : ''));

const { meta, h1 } = useMeta({
  t,
  pageKey: pageName,
  brandName: useAppConfig().brandName,
  sortOptions: sortItemsDefault,
  text: routeQueryCategories,
  secondText: countryName,
  // Страну не определили — берём заголовок без неё, иначе останется висячий предлог.
  h1Key: sortType => (sortType === 'trending' && !countryName.value ? 'h1_no_country' : 'h1'),
});

const countryFlagImg = computed(() => (isCountryShown.value ? clientCountry.flagSrc.value : undefined));

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