import { defineComponent, onMounted, ref, watch, computed } from 'vue'
import { tools } from '@tools'
import { useUserStore } from '@store/UserStore'
import { useRouter } from 'vue-router'
import { useGlobalStore } from '@store/globalStore'
import { useProducts } from '@store/Products'
import { useI18n } from 'vue-i18n'
import { toolsext } from '@store/Modules/toolsext'
import { useQuasar } from 'quasar'
import { costanti } from '@costanti'

import { shared_consts } from '@src/common/shared_vuejs'
import { CProductCard } from '@src/components/CProductCard'
import { CSelectUserActive } from '@src/components/CSelectUserActive'
import type { IProduct } from '@src/model'


export default defineComponent({
  name: 'cash',
  components: { CProductCard, CSelectUserActive },
  props: {},
  setup() {
    const userStore = useUserStore()
    const globalStore = useGlobalStore()
    const productStore = useProducts()
    const $router = useRouter()
    const $q = useQuasar()
    const { t } = useI18n()

    const search = ref('')

    const cosa = ref(0)
    const cat = ref('')
    const loadpage = ref(false)

    watch(() => cosa.value, (newval, oldval) => {
      tools.setCookie(tools.COOK_COSA_PRODOTTI, cosa.value.toString())
    })

    const getArrProducts = computed(() => {
      const arrprod = productStore.getProducts(cosa.value)
      const catstr = cat.value;
      const lowerSearchText = search.value.toLowerCase().trim();
      if ((!lowerSearchText || (lowerSearchText && lowerSearchText.length < 2)) && !catstr) {
        return arrprod
      }

      return arrprod.filter((product: IProduct) => {
        const lowerName = product.productInfo.name!.toLowerCase();
        const hasCategoria = !catstr || (catstr && product.productInfo.idCatProds?.includes(catstr));

        // Use a regular expression to match whole words
        const codeMatch = new RegExp(`\\b${lowerSearchText}\\b`, 'i');
        const nameMatch = new RegExp(`\\b${lowerSearchText}`, 'i');

        // Check if any word in lowerName starts with lowerSearchText
        const anyWordStartsWithSearch = lowerName.split(/\s+/).some(word => nameMatch.test(word));

        return (codeMatch.test(product.productInfo.code) || anyWordStartsWithSearch) && hasCategoria;
      });
    })

    /*function getProducts() {
      let arrprod = productStore.getProducts(cosa.value)
      if (!search.value) {
        return arrprod
      }

      let lowerSearchText = search.value.toLowerCase();
      let catstr = cat.value;

      return arrprod.filter((product: IProduct) => {
        let lowerName = product.productInfo.name!.toLowerCase();
        const hasCategoria = !catstr || (catstr && product.productInfo.idCatProds?.includes(catstr));
        return (product.productInfo.code!.includes(search.value) || lowerName.includes(lowerSearchText)) && hasCategoria
      });
    }*/

    async function mounted() {
      loadpage.value = false
      await productStore.loadProducts(true)
      cosa.value = tools.getCookie(tools.COOK_COSA_PRODOTTI, shared_consts.PROD.TUTTI, true)
      // Inizializza
      loadpage.value = true
    }

    function getCatProds() {
      const arrcat = productStore.getCatProds(cosa.value)
      const riscat: any = [{ label: 'Tutti', value: '', icon: undefined, color: undefined }]
      for (const rec of arrcat) {
        riscat.push({ label: rec.name, value: rec._id, icon: rec.icon, color: rec.color })
      }

      return riscat
    }


    onMounted(mounted)

    return {
      userStore,
      costanti,
      tools,
      toolsext,
      getArrProducts,
      search,
      cosa,
      shared_consts,
      getCatProds,
      cat,
      productStore,
      t,
      loadpage,
    }
  }
})