import { computed } from 'vue'
import { useGetProductsList } from '~/api/queries/wp'
import { useProduct } from '~/composables'

export const useProductsList = () => {
  const { getAttribute } = useProduct()

  // TODO перенести запрос на сервер, на сервере получать id вариантов и делать запросы у useProduct(id),
  //  получать варианты и вместе со всеми вариантами ренедрить список товаров
  const { data: productData } = useGetProductsList()

  const productCardData = computed(() =>
    productData?.value?.map(product => ({
      id: product?.id,
      name: product?.name,
      price: product?.price,
      variations: product?.variations,
      images: product?.images?.slice(0, 5),
      colors: getAttribute(product?.attributes, 'color')?.options,
    })) ?? [],
  )

  return {
    productCardData,
  }
}