<template>
  <div>
    <UiBreadcrumbs
      :items="breadcrumbs"
      class="_breadcrumbs _container"
    />
    <ViewModels
      v-if="models"
      :data="models"
      :status="status"
      :h1="h1"
      :top-model-items="topModels?.items"
    />
    <div
      v-else
      class="_loading"
    />

    <SectionSeoText
      :text="t('models_footer_text')"
      class="models__seo _container"
      links-link="models_footer_links"
    />
  </div>
</template>

<script setup lang="ts">
import type { IBreadcrumbItem } from '../../types';
import { ModelsApiService } from '../../services/api/models.service';
import { AsyncData } from '../../runtime';
import { sortModels } from '../../lib';

const { t } = useI18n();
const pageName = useRoute().name;
const pagePureName = useGetPureRouteName();

const testModelImages = [
  '/img/models/Austin_Young.png',
  '/img/models/Dakota_Lovell.png',
  '/img/models/Devin_Franco.png',
  '/img/models/Falcon_Al.png',
  '/img/models/Jax_Thirio.png',
  '/img/models/LeGrand_Wolf.png',
  '/img/models/Oliver_Strelly.png',
  '/img/models/Roman_Todd.png',
  '/img/models/Sebastian _Kane.png',
];

function applyTestImages<T extends { primaryImageUrl?: string; thumbUrl?: string }>(items: T[] | undefined): T[] | undefined {
  return items?.map((item, i) => ({
    ...item,
    primaryImageUrl: testModelImages[i % testModelImages.length],
    thumbUrl: testModelImages[i % testModelImages.length],
  }));
}

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

if (topModels.value?.items) {
  topModels.value.items = applyTestImages(topModels.value.items)!;
}
if (models.value?.items) {
  models.value.items = applyTestImages(models.value.items)!;
}

const { meta, h1 } = useMeta({
  t,
  pageKey: pagePureName,
  brandName: useAppConfig().brandName,
  sortOptions: sortModels,
  seo: () => models.value?.seo,
});

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

const breadcrumbs = [
  {
    name: t('navigation.main'),
    to: '/',
  },
  {
    name: t('navigation.models'),
  },
] as IBreadcrumbItem[];
</script>

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