import { useProduct } from '#build/imports'
import { createSharedComposable } from '@vueuse/core'
import { computed, ref } from 'vue'

export const useCurrentProduct = createSharedComposable(() => {
  const { variations, productsData } = useProduct()

  const currentVariant = ref(variations?.value[0])

  const currentColor = computed(() => currentVariant?.value?.identifier?.split('_')[0])
  const currentMaterial = computed(() => currentVariant?.value?.identifier?.split('_')[1])

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

  watch(() => variations.value, (newValue) => {
    if (newValue) {
      currentVariant.value = newValue[0]
    }
  })

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