import { inject, defineComponent, PropType, ref, watch, toRef, onMounted, toRefs, computed } from 'vue'
import { useI18n } from '@src/boot/i18n'

import { tools } from '../../store/Modules/tools'

import { fieldsTable } from '@store/Modules/fieldsTable'

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

import {
  IColGridTable,
  IFilter,
  ITableRec,
  ISearchList,
  IPagination,
  IParamDialog,
  IMySkill
} from 'model'
import { lists } from '@store/Modules/lists'
import { IParamsQuery } from 'model'
import { CMyPopupEdit } from '../CMyPopupEdit'
import { CMyFriends } from '../CMyFriends'
import { CMyUser } from '../CMyUser'
import { CMyGroups } from '../CMyGroups'
import { CMyFieldDb } from '../CMyFieldDb'
import { CMyRecCard } from '../CMyRecCard'
import { CMyRecGrpCard } from '../CMyRecGrpCard'
import { CMyRecCircuitCard } from '../CMyRecCircuitCard'
import { CMySelect } from '../CMySelect'
import { CTitleBanner } from '../CTitleBanner'

import { useUserStore } from '@store/UserStore'
import { useGlobalStore } from '@store/globalStore'
import { useQuasar, exportFile } from 'quasar'
import { costanti } from '@costanti'
import translate from '@/globalroutines/util'
import { toolsext } from '@store/Modules/toolsext'
import { CMyCardPopup } from '@/components/CMyCardPopup'
import { CMyCardGrpPopup } from '@/components/CMyCardGrpPopup'
import { CMyCardCircuitPopup } from '@/components/CMyCardCircuitPopup'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'CBarSelection',
  props: {
    table: {
      type: String,
      required: true,
    },
    prop_search: {
      type: Boolean,
      required: false,
      default: true,
    },
    mytitle: {
      type: String,
      required: false,
      default: '',
    },
    myicon: {
      type: String,
      required: false,
      default: '',
    },
    mycolor: {
      type: String,
      required: false,
      default: '',
    },
    hint: {
      type: String,
      required: false,
      default: 'Cerca',
    },
  },
  components: {
    CMyPopupEdit, CTitleBanner, CMyFieldDb, CMySelect, CMyFriends, CMyGroups,
    CMyUser, CMyRecCard, CMyCardPopup, CMyRecGrpCard, CMyCardGrpPopup, CMyCardCircuitPopup,
    CMyRecCircuitCard
  },
  setup(props, { emit }) {
    const $q = useQuasar()
    const { t } = useI18n()
    const userStore = useUserStore()
    const globalStore = useGlobalStore()
    const isfinishLoading = computed(() => globalStore.finishLoading)

    const $router = useRouter()

    const search = ref('')
    const loading = ref(false)

    const visupagedialog = ref(false)
    const myrecdialog = ref(null)

    const myinfscroll = ref(null)

    const serverData: any = ref([])
    const numRecLoaded = ref(0)
    const changetable = ref(false)
    const searchList = ref([] as ISearchList[])

    const actual = ''

    const tablesel = ref('')
    const myfilter = ref('')
    const myfilterand: any = ref([])
    let rowsel: any = {}
    const dark = true
    const canEdit = ref(false)
    const optionsMainCards = ref()

    let returnedCount = 0
    const colVisib: any = ref([])
    const colExtra: any = ref([])
    const actualDate: any = ref(null as any)

    const rowclicksel = ref(null as any)
    const colclicksel = ref(null)

    const selector = inject('selector', {})
    const showfilter = ref(false)  // filtri avanzati

    const filter = ref(0)
    const filtergrp = ref(costanti.MY_GROUPS)

    const mycolumns = ref([])

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

    watch(() => props.table, (newval, oldval) => {
      tablesel.value = props.table
    })



    const labelcombo = computed(() => (item: any) => {
      let lab = item.label
      if (item.showcount)
        lab += ' (' + valoriopt.value(item, false, false).length + ')'
      return lab
    })

    const myselector = computed({
      get: () => globalStore.myselector,
      set: val => {
        globalStore.myselector = val
      },
    })

    function refresh() {
      //
      // emit('updatesearch', )
    }

    function setProvinceByRegion(tableprov: string, tabregion: string, newval: any) {

      const recRegion = searchList.value.find((rec) => rec.table === tabregion)
      if (recRegion)
        tools.setCookie(tools.COOK_SEARCH + tabregion, newval)

      for (const item of searchList.value) {
        if (item.table === tableprov) {
          const valsaved = tools.getCookie(tools.COOK_SEARCH + tableprov + '_' + newval, costanti.FILTER_TUTTI)
          const rec = searchList.value.find((myrec) => myrec.table === tableprov) // check if exist
          let trovato = false
          let arrvalues = []
          if (rec) {
            arrvalues = valoriopt.value(rec.value, false, false)
            if (arrvalues)
              trovato = arrvalues.find((myrec: any) => myrec[myrec.key] === valsaved)
          }
          if (valsaved && trovato)
            item.value = valsaved
          else {
            if (arrvalues) {
              item.value = costanti.FILTER_TUTTI
            }
          }
        } else if (item.table === toolsext.TABCITIES) {
          const valsaved = tools.getCookie(tools.COOK_SEARCH + toolsext.TABCITIES + '_' + newval, costanti.FILTER_TUTTI)
          const rec = searchList.value.find((myrec) => myrec.table === toolsext.TABCITIES) // check if exist
          let trovato = false
          let arrvalues = []
          if (rec) {
            arrvalues = valoriopt.value(rec.value, false, false)
            if (arrvalues)
              trovato = arrvalues.find((myrec: any) => myrec[myrec.key] === valsaved)
          }
          if (valsaved && trovato)
            item.value = valsaved
          else {
            if (arrvalues) {
              item.value = costanti.FILTER_TUTTI
            }
          }
        }
      }

    }

    function searchval(newval: any, table: any) {
      // console.log('REFRR searchval', newval, table)

      globalStore.myselector = { table, data: newval }
      // console.log('globalStore.myselector', globalStore.myselector)

      tools.setCookie(tools.COOK_SEARCH + table, newval)

      if (table === toolsext.TABREGIONS) {
        setProvinceByRegion(toolsext.TABPROVINCE, table, newval)
      } else if (table === toolsext.TABGOODS) {
        const recSector = searchList.value.find((rec) => rec.table === toolsext.TABSECTORGOODS)
        if (recSector) {
          tools.setCookie(tools.COOK_SEARCH + table + '_' + recSector.value, newval)
        }
        // setCategBySector('sectorgoods', table, newval)
      }


      refresh()
    }

    function getRowsNumberCount() {

      return returnedCount
    }


    function created() {
      //

    }

    function doSearch() {
      //  console.log('REFRR - doSearch')
      refresh()
    }

    function mounted() {

      optionsMainCards.value = []
      let obj = { label: '', value: '', icon: '' }
      for (let i = 0; i < costanti.MAINCARDS.length - 1; i++) {
        let rec: any = costanti.MAINCARDS[i]
        if (rec.table) {
          obj.label = rec.title
          obj.value = rec.table
          obj.icon = rec.icon
          optionsMainCards.value.push({...obj})
        }
      }

      tablesel.value = props.table

      console.log(' . TABLE =', props.table)
      mycolumns.value = fieldsTable.getArrColsByTable(props.table)

      searchList.value = [
        {
          label: 'Comune',
          table: 'cities',
          key: 'idCity',
          type: costanti.FieldType.select_by_server,
          value: tools.getCookie(tools.COOK_SEARCH + 'cities', costanti.FILTER_TUTTI),
          addall: true,
          arrvalue: [],
          useinput: true,
          filter: null,
          tablesel: 'cities',
        },
      ]
    }

    function visButtRow() {
      return false
    }

    function gotoPageSel() {
      const rec = costanti.MAINCARDS.find((rec: any) => rec.table === tablesel.value)
      if (rec) {
        $router.push(rec.to)
      }
    }

    created()
    onMounted(mounted)

    return {
      isfinishLoading,
      search,
      canEdit,
      rowclicksel,
      colVisib,
      colExtra,
      colclicksel,
      loading,
      serverData,
      myfilter,
      lists,
      myfilterand,
      tools,
      costanti,
      toolsext,
      fieldsTable,
      globalStore,
      searchList,
      searchval,
      valoriopt,
      labelcombo,
      filter,
      filtergrp,
      shared_consts,
      showfilter,
      visupagedialog,
      myrecdialog,
      actualDate,
      actual,
      numRecLoaded,
      myinfscroll,
      t,
      mycolumns,
      visButtRow,
      doSearch,
      myselector,
      optionsMainCards,
      tablesel,
      gotoPageSel,
    }
  }
})