import { useGetProductsDetail, useGetProductsVariationsList } from '~/api/queries'

export const useProduct = () => {
  const { data: productsData } = useGetProductsDetail(79)
  const { data: productsVariationsData } = useGetProductsVariationsList(79)

  function getAttribute(attributes: string[], name: string) {
    return attributes?.find(attribute => attribute?.name === name)
  }

  const defaultColor = computed(() => getAttribute(productsData?.value?.default_attributes, 'color')?.option)
  const defaultMaterial = computed(() => getAttribute(productsData?.value?.default_attributes, 'material')?.option)
  const defaultSize = computed(() => getAttribute(productsData?.value?.default_attributes, 'size')?.option)

  const defaultVariant = computed(() => {
    return productsVariationsData?.value?.find(variation => getAttribute(variation?.attributes, 'color')?.option === defaultColor?.value)
      && productsVariationsData?.value?.find(variation => getAttribute(variation?.attributes, 'material')?.option === defaultMaterial?.value)
  })

  const colors = computed(() => getAttribute(productsData?.value?.attributes, 'color')?.options)
  const materials = computed(() => getAttribute(productsData?.value?.attributes, 'material')?.options)
  const sizes = computed(() => getAttribute(productsData?.value?.attributes, 'size')?.options)

  return {
    productsData,
    productsVariationsData,

    defaultColor,
    defaultMaterial,
    defaultSize,
    defaultVariant,

    colors,
    materials,
    sizes,

    getAttribute,
  }
}