import type { Language } from '../../runtime';
import { AsyncData, getSelectedQuery } from '../../runtime';
import { sortModels } from '../../lib';
import { useRoute } from 'vue-router';
import type { IModelCard, PaginatedResponse } from '../../types';

export const useFetchModels = async (
  apiMethod: (...args: any[]) => Promise<PaginatedResponse<IModelCard>>
) => {
  const route = useRoute();
  const mobile = !!useState<boolean>('isMobile').value;
  const perPage = mobile ? 12 : 48;
  const lang = useLang() as Language;
  const key = AsyncData.Models;
  const stateKey = computed(() => `data-${key}-${JSON.stringify(route.query)}-${lang}`);

  const filters = computed(() => Object.entries(route.query)
    .filter(([key]) => key.startsWith('filter_'))
    .map(([key, value]) => ({
      name: key.replace(/^filter_/, ''),
      value: Array.isArray(value) ? value[0] : (value as string),
    })));

  const { data, status, refresh } = await useAsyncData<PaginatedResponse<IModelCard>>(
    key,
    () => useApiFetcher<PaginatedResponse<IModelCard>>(
      stateKey.value,
      apiMethod,
      lang,
      {
        page: Number(route.query.page) || 1,
        'per-page': perPage,
      },
      getSelectedQuery(route, sortModels) || 'rank',
      unref(filters)
    )(),
    {
      watch: [
        () => {
          if (route.query) {
            const currentQuery = route.query;
            return JSON.stringify(currentQuery);
          }
        },
      ],
    }
  );

  return { data, status, refresh };
};