import { ref, onMounted, onBeforeMount, PropType, reactive, watch } from 'vue'
import { CCardState } from '../CCardState'

import { computed, defineComponent } from 'vue'
import { useGlobalStore } from '@store/globalStore'
import { useProducts } from '@store/Products'
import { CCopyBtn } from '@src/components/CCopyBtn'
import { CSingleCart } from '@src/components/CSingleCart'
import { CTitleBanner } from '@src/components/CTitleBanner'

import { useI18n } from 'vue-i18n'

import MixinUsers from '../../mixins/mixin-users'


export default defineComponent({
  name: 'CMyCart',
  props: {},
  components: { CTitleBanner, CCardState, CCopyBtn, CSingleCart },

  setup() {
    const globalStore = useGlobalStore()
    const products = useProducts()
    const { t } = useI18n()

    const { getnumItemsCart } = MixinUsers()

    const myCart = computed(() => products.cart)
    const myTotalPrice = computed(() => {
      if (products.cart) {
        return products.cart.totalPrice
      } else {
        return 0
      }
    })

    const ordersCart = computed(() => {
      if (!!products.cart) {
        return products.cart.items
      } else {
        return null
      }
    })

    const numOrders = computed(() => {
      if (!!products.cart && products.cart.items) {
        return products.cart.items.length
      } else {
        return 0
      }
    })


    function closecart() {
      globalStore.rightCartOpen = false
    }

    function mounted() {
      products.loadOrders()
    }

    function existsOrders() {
      return products.getNumOrders() > 0
    }

    onMounted(mounted)

    return {
      myCart,
      myTotalPrice,
      ordersCart,
      numOrders,
      closecart,
      getnumItemsCart,
      existsOrders,
      globalStore,
      t,
    }
  },
})
