import type { MaybeRefOrGetter } from 'vue';
import type { Language } from '../../runtime';
import type { IWebcamModelsResponse } from '../../types';
import { WebcamsApiService } from '../../services/api/webcams.service';
import { toWebcamFilterPayload } from '../../utils/webcams/to-filter-payload';
import { WEBCAM_NEW_TAG } from '../../lib';

/**
 * Страница вебкам-моделей: выдача провайдера + фасеты фильтров одним запросом.
 *
 * Состояние фильтров живёт в query-параметрах `filter_*` (общая конвенция сайта),
 * страница — в `page`. Сортировки у провайдера нет: `?sort=new` превращается в
 * его тег `new`, а тег из пути (`/webcams/{tag}`) старше сортировки.
 *
 * @param tag - тег из пути раздела, если он есть
 */
export const useFetchWebcamModels = async (tag: MaybeRefOrGetter<string>) => {
  const route = useRoute();
  const lang = useLang() as Language;
  const mobile = !!useState<boolean>('isMobile').value;
  const perPage = mobile ? 12 : 48;

  const requestTag = computed(() => toValue(tag) || (route.query.sort === WEBCAM_NEW_TAG ? WEBCAM_NEW_TAG : ''));
  const filters = computed(() => toWebcamFilterPayload(route.query));

  const { data, status, refresh } = await useAsyncData<IWebcamModelsResponse>(
    'webcam-models',
    () => useApiFetcher<IWebcamModelsResponse>(
      'webcam-models',
      WebcamsApiService.getModelsWithFacets,
      lang,
      {
        page: Number(route.query.page) || 1,
        'per-page': perPage,
      },
      requestTag.value,
      filters.value,
    )(),
    {
      watch: [() => JSON.stringify(route.query), requestTag],
    },
  );

  return { data, status, refresh };
};