import { defineComponent, ref, toRef, computed, PropType, watch, onMounted, reactive } from 'vue'
import { useI18n } from '@src/boot/i18n'
import { useUserStore } from '@store/UserStore'
import { useGlobalStore } from '@store/globalStore'
import { useQuasar } from 'quasar'

import { CTitleBanner } from '../CTitleBanner'
import { CCardState } from '../CCardState'
import { CCopyBtn } from '../CCopyBtn'

import { func_tools, toolsext } from '@store/Modules/toolsext'

import { IOrder, IOrderCart, IProduct } from '@src/model'
import { tools } from '@store/Modules/tools'
import { useProducts } from '@store/Products'

import { shared_consts } from '@src/common/shared_vuejs'

export default defineComponent({
  name: 'CProductCard',
  props: {
    product: {
      type: Object as PropType<IProduct | null>,
      required: false,
      default: null,
    },
    code: {
      type: String,
      required: false,
      default: '',
    },
    complete: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  components: { CTitleBanner, CCardState, CCopyBtn },
  setup(props, { emit }) {
    const $q = useQuasar()
    const { t } = useI18n()
    const userStore = useUserStore()
    const globalStore = useGlobalStore()
    const products = useProducts()

    const site = ref(globalStore.site)

    const myorder = reactive(<IOrder>{
      idapp: process.env.APP_ID,
      quantity: 0,
      idStorehouse: '',
      idProvider: ''
    })

    const storeSelected = ref('')
    const arrordersCart = ref(<IOrderCart[]>[])

    const openlistorders = ref(false)
    const endload = ref(false)
    const myproduct = ref(<IProduct>{})

    const valoriopt = computed(() => (item: any, addall: boolean, addnone: boolean) => {
      // console.log('valoriopt', item.table)
      return globalStore.getTableJoinByName(item.table, addall, addnone, item.filter)
    })

    /*const myproduct = computed((): IProduct => {
      console.log('getproduct computed')
      const ris = products.getProduct(props.code)
      console.log('   received', ris)
      return ris
    })*/


    function iconWhishlist(order: IProduct) {
      if (true) {
        return 'far fa-heart'
      } else {
        return 'fas fa-heart'
      }
    }
    function addtoCart(add: boolean) {

      if (!userStore.isLogged) {
        tools.showNeutralNotif($q, t('ecomm.area_personale'))
        globalStore.rightDrawerOpen = true
        return false
      }


      products.addToCart({ product: myproduct.value, order: myorder, addqty: add }).then((ris) => {
        let strprod = t('ecomm.prodotto')

        if (myorder.quantity > 1 || myorder.quantity === 0)
          strprod = t('ecomm.prodotti')

        let msg = ''
        if (ris === null)
          msg = t('ecomm.error_cart')
        else {

          if (myorder.quantity === 0) {
            msg = t('ecomm.prodotto_tolto')
          } else {
            msg = t('ecomm.prod_sul_carrello', { strprod, qty: myorder.quantity })
          }

        }

        updateproduct()

        if (ris === null || myorder.quantity === 0)
          tools.showNotif($q, msg)
        else
          tools.showPositiveNotif($q, msg)

      })
    }

    function getnumstore() {
      if (myproduct.value.storehouses)
        return myproduct.value.storehouses.length
      else
        return 0
    }

    function getSingleStorehouse() {
      try {
        const mystore = myproduct.value.storehouses[0]
        if (mystore)
          return mystore.name + ' (' + mystore.city + ')'
        else
          return ''
      } catch (e) {
        return ''
      }
    }

    function updateproduct() {
      myproduct.value = products.getProduct(props.code)
    }

    function getStorehouses() {

      const myarr: any = []
      let ind = 1
      myproduct.value.storehouses.forEach((store) => {
        myarr.push(
          {
            id: ind,
            label: store.name + ' (' + store.city + ')',
            value: store._id
          })

        ind++
      })

      // console.log('arraystore', myarr)
      return myarr
    }

    function checkifCartDisable() {
      // return !myorder.idStorehouse
      return false
    }

    function getQtyAvailable() {
      products.updateQuantityAvailable(myproduct.value._id)
      let qty = myproduct.value.quantityAvailable!
      return qty
    }

    function getQtyWarn() {
      if (myorder.quantity > 0) {
        return t('ecomm.di_cui_x_in_carrello', { qty: myorder.quantity })
      }
      return ''
    }

    watch(() => props.code, (newval, oldval) => {
      console.log('change code')
      load()
    })

    watch(() => storeSelected.value, (newval, oldval) => {
      myorder.idStorehouse = newval
    })

    function load() {
      updateproduct()
      console.log('Load', myproduct.value.name)
      // console.log('created Cproductcard', code)

      arrordersCart.value = products.getOrdersCartByIdProduct(myproduct.value._id)

      if (!!myproduct.value) {
        if (myproduct.value.storehouses && myproduct.value.storehouses.length === 1) {
          myorder.idStorehouse = myproduct.value.storehouses[0]._id
        }

        const ord = products.getOrderProductInCart(myproduct.value._id)
        if (ord) {
          myorder.quantity = ord.quantity
        }
      }

      console.log('°°° ENDLOAD °°°')
      endload.value = true
    }

    function getmycardcl() {
      return (props.complete) ? 'my-card-big' : 'my-card-prod'
    }

    function getclimgproduct() {
      return 'myimgproduct centermydiv'
    }

    function enableSubQty() {
      return myorder.quantity ? myorder.quantity > 0 : false
    }

    function enableAddQty() {
      if (site.value.ecomm!.enablePreOrders) {
        return true
      } else {
        return getQtyAvailable() > 0
      }

    }

    onMounted(load)

    return {
      addtoCart,
      iconWhishlist,
      getmycardcl,
      getclimgproduct,
      getnumstore,
      getSingleStorehouse,
      getStorehouses,
      checkifCartDisable,
      myproduct,
      myorder,
      tools,
      t,
      storeSelected,
      enableSubQty,
      enableAddQty,
      getQtyAvailable,
      getQtyWarn,
      openlistorders,
      func_tools,
      toolsext,
      products,
      arrordersCart,
      endload,
      shared_consts,
      site,
    }
  }
})