import { useStorage } from '@vueuse/core'
import { useProduct } from './useProduct'

export interface ICartItem {
  variation_id: number
}

export interface ICart {
  line_items: ICartItem[]
}

export const useCart = () => {
  const cart = useStorage<ICart>('cart', { line_items: [] })

  const cartAddItem = (item: ICartItem) => {
    cart.value.line_items.push(item)
  }

  const cartRemoveItem = (item: ICartItem) => {
    cart?.value?.line_items
      ?.splice(cart?.value?.line_items
        ?.findIndex((cartItem: ICartItem) =>
          cartItem?.variation_id === item?.variation_id), 1)
  }

  const cartRemoveAllItems = () => {
    cart.value = { line_items: [] }
  }

  const cartProducts = computed(() => cart?.value?.line_items?.map((line_item) => {
    const { productsData } = useProduct(line_item?.variation_id.toString())
    return productsData
  }))

  const cartSum = computed(() => cartProducts?.value?.reduce((acc, curr) => {
    acc += Number(curr?.value?.price)
    return acc
  }, 0))

  return {
    cart,
    cartAddItem,
    cartRemoveItem,
    cartRemoveAllItems,

    cartProducts,
    cartSum,
  }
}