import { GET_PRODUCTS } from '~/graphql/queries/standalone/products';
import type {IProductResponse} from '~/types';

interface IProdVars {
  first: number,
  categoriesSlugs: string,
  attributes?: string,
  orderBy?: string,
  minPrice?: number,
  maxPrice?: number,
  productAfter?: string
}

export async function useStore(
  slug: string,
  attributes?: string,
  orderBy?: string,
  minPrice?: number,
  maxPrice?: number,
  productAfter?: string
) {
  const variables = reactive<IProdVars>({
    first: 15,
    categoriesSlugs: slug,
    attributes,
    orderBy,
    minPrice,
    maxPrice,
    productAfter
  });

  const { pending, data, error, refresh } = await useAsyncQuery<IProductResponse>(
      GET_PRODUCTS,
      variables
  );

  const products = ref(data.value?.products.edges ?? []);
  const pageInfo = computed(() => data.value?.products.pageInfo ?? null);

  watch(error, e => e && console.error('useStore products error', e));

  watch(
    () => variables.productAfter,
    async (newCursor, oldCursor) => {
      if (!newCursor || newCursor === oldCursor) return;
      await refresh();
      const newEdges = data.value?.products.edges ?? [];
      products.value.push(...newEdges);
    }
  );

  watch(
    [
      () => variables.attributes,
      () => variables.orderBy,
      () => variables.minPrice,
      () => variables.maxPrice
    ],
    async () => {
      variables.productAfter = '';
      await refresh();
      products.value = data.value?.products.edges ?? [];
    }
  );

  return {
    pending,
    products,
    pageInfo,
    variables
  };
}