import { createSharedComposable } from '@vueuse/core'
import { computed, ref, watch } from 'vue'

export const useCurrentProduct = createSharedComposable(() => {
  const { defaultVariant, productsData, productsVariationsData, getAttribute } = useProduct()

  const currentVariantId = ref(defaultVariant?.value?.id)

  const currentVariant = computed(() =>
    productsVariationsData?.value?.find(variation => variation?.id === currentVariantId?.value))

  const currentColor = computed(() => getAttribute(currentVariant?.value?.attributes, 'color')?.option)
  const currentMaterial = computed(() => getAttribute(currentVariant?.value?.attributes, 'material')?.option)

  const currentVariantImages = computed(() =>
    productsData?.value?.images?.filter(img => img?.src?.includes(`${currentColor.value}_${currentMaterial.value}_`)))

  watch(() => defaultVariant.value, (newValue) => {
    if (newValue) {
      currentVariantId.value = newValue.id
    }
  })

  return {
    currentVariantId,
    currentVariant,
    currentColor,
    currentMaterial,
    currentVariantImages,
  }
})