import {
  computed,
  provide, defineComponent, onBeforeMount, onBeforeUnmount, onMounted, ref, toRef, toRefs, watch,
} from 'vue'

import { tools } from '@tools'
import { CMyFieldDb } from '@src/components/CMyFieldDb'
import { costanti } from '@costanti'
import { useGlobalStore } from '@store/globalStore'
import { useUserStore } from '@store/UserStore'

import { CTitlePage } from '@src/components/CTitlePage'
import { CGridTableRec } from '@src/components/CGridTableRec'
import type { IColGridTable, ISearchList } from 'model';
import { IMyBacheca, IMySkill, ISkill } from 'model'
import { shared_consts } from '@src/common/shared_vuejs'
import { useI18n } from 'vue-i18n'
import { toolsext } from '@store/Modules/toolsext'
import { fieldsTable } from '@store/Modules/fieldsTable'
import { useQuasar } from 'quasar'

export default defineComponent({
  name: 'CCatalogList',
  emits: ['clickButtBar'],
  props: {
    ind: {
      type: Number,
      required: false,
      default: -1,
    },
    prop_search: {
      type: Boolean,
      required: false,
      default: true,
    },
    finder: {
      type: Boolean,
      required: false,
      default: true,
    },
    heightcarousel: {
      type: String,
      required: false,
      default: '',
    },
    heightcard: {
      type: String,
      required: false,
      default: '400px',
    },
    widthcard: {
      type: String,
      required: false,
      default: '300px',
    },
    heightimg: {
      type: String,
      required: false,
      default: '150px',
    },
    widthimg: {
      type: String,
      required: false,
      default: '300px',
    },
  },
  components: {
    CMyFieldDb, CGridTableRec, CTitlePage,
  },
  setup(props, { attrs, slots, emit }) {
    const { t } = useI18n()
    const $q = useQuasar()
    const globalStore = useGlobalStore()
    const userStore = useUserStore()

    const table = ref('catalogs')

    const arrfilterand: any = ref([])
    const filtercustom: any = ref([])

    const search = ref('')
    const myrecfiltertoggle = ref(tools.FILTER_ALL)

    const prop_colkey = ref('')
    const col_title = ref('')
    const col_footer = ref('')
    const col_tabfooter = ref('')

    const strextra = ref('')
    const myoptions = ref(<any>[])

    const col = ref(<IColGridTable[]>[])

    const myCatRef = ref(<any>null)

    /*
    const idSectorServizi = computed(() => {
      let myval: any = null
      myval = searchList_Servizi.value.find((rec) => (rec.table === toolsext.TABSECTORS))
      if (myval) {
        const ris = myval.value || 0
        // console.log('idSectorServizi=', ris)
        return ris
      } else {
        return 0
      }
    })

     */


    function updatefilter(value: any) {
      //
    }


    watch(() => myrecfiltertoggle.value, (value: any, oldval: any) => {
      updatefilter(value)
    },
    )

    const mypagination = computed(() => {
      return { sortBy: 'title', descending: false, page: 1, rowsNumber: 0, rowsPerPage: 10 }
    })

    const showType = computed(() => {
      return costanti.SHOW_MYCARD
    })

    const hint = computed(() => {
      return 'digita una parola da cercare'
    })

    const visuType = computed(() => {
      return false // $q.screen.gt.xs
    })

    const noMsgRecord = computed(() => {
      return 'Nessun dato trovato con i filtri selezionati'
    })


    function mounted() {

      const obj = tools.getParamsByTable(table.value)


      prop_colkey.value = obj.prop_colkey
      col_title.value = obj.col_title
      col_footer.value = obj.col_footer
      col_tabfooter.value = obj.col_tabfooter

      filtercustom.value = []

      col.value = fieldsTable.getArrColsByTable(table.value)
    }



    function mySortFieldsAvailable() {
      if (table.value === toolsext.TABUSER) {
        return userStore.getSortFieldsAvailable()
      }

      return []
    }



    function doSearch() {
      //
    }

    function clickButtBar(item: any) {
      if (myCatRef.value) {
        myCatRef.value.clickButtBar(item)
      }

      // emit('clickButtBar', item)
    }

    onMounted(mounted)

    return {
      t,
      tools,
      costanti,
      arrfilterand,
      filtercustom,
      search,
      doSearch,
      myrecfiltertoggle,
      prop_colkey,
      col_title,
      col_footer,
      col_tabfooter,
      col,
      toolsext,
      mypagination,
      noMsgRecord,
      showType,
      visuType,
      hint,
      myoptions,
      mySortFieldsAvailable,
      clickButtBar,
      myCatRef,
      table,
    }
  },
})