import {
  computed,
  defineComponent,
  onMounted,
  PropType,
  ref,
  watch,
  reactive,
  toRefs,
} from 'vue';

import type { ISearchList } from '../../model';
import { ICalcStat, IOperators } from '../../model';
import { useUserStore } from '../../store/UserStore';
import { useRouter } from 'vue-router';
import { useGlobalStore } from '../../store/globalStore';
import { useCircuitStore } from '../../store/CircuitStore';
import { useI18n } from 'vue-i18n';

import { shared_consts } from '@src/common/shared_vuejs';
import { costanti, IMainCard } from '@store/Modules/costanti';

import { CMyUser } from '../CMyUser';
import { CTitleBanner } from '../CTitleBanner';
import { CMyGroup } from '../CMyGroup';
import { CQRCode } from '../CQRCode';
import { CCopyBtnSmall } from '../CCopyBtnSmall';
import { CContactUser } from '../CContactUser';
import { CGridTableRec } from '../CGridTableRec';
import { CUserInfoAccount } from '../CUserInfoAccount';
import { tools } from '@tools';
import { useQuasar } from 'quasar';

import { colmyUserPeople, colmyUserGroup } from '@store/Modules/fieldsTable';

export default defineComponent({
  name: 'CFindUsers',
  props: {
    actionType: {
      type: Number,
      required: false,
      default: costanti.ACTIONTYPE.SEND_RIS,
    },
    sendRIS: {
      type: String,
      required: false,
      default: '',
    },
  },
  components: {
    CMyUser,
    CMyGroup,
    CUserInfoAccount,
    CCopyBtnSmall,
    CTitleBanner,
    CContactUser,
    CGridTableRec,
    CQRCode,
  },
  setup(props) {
    const userStore = useUserStore();
    const globalStore = useGlobalStore();
    const circuitStore = useCircuitStore();
    const { t } = useI18n();
    const $q = useQuasar();
    const $router = useRouter();

    const receiveRislist = computed(() =>
      globalStore.datastat ? globalStore.datastat.receiveRislist : []
    );
    const receiveRislistgroup = computed(() =>
      globalStore.datastat ? globalStore.datastat.receiveRislistgroup : []
    );
    const listlinksreg = computed(() =>
      globalStore.datastat ? globalStore.datastat.listlinksreg : []
    );

    const arrfilterand: any = ref([]);
    const filtercustom: any = ref([]);
    const searchList = ref(<ISearchList[]>[]);

    const filter = ref(costanti.FIND_PEOPLE);

    const loading = ref(false);
    const tipoConto = ref(0);

    const contact = computed(() => userStore.my);

    const searchType = ref('receivers');

    const usersList = ref(<any>{ show: false, title: '', list: [], listgroup: [] });

    const options = ref([
      {
        label: 'Lista dei Riceventi di oggi',
        value: 'receivers',
      },
      {
        label: 'Cerca per Nome o Username',
        value: 'username',
      },
      {
        label: 'Scansiona il QRCode del Destinatario',
        value: 'qrcode',
      },
    ]);

    const arrTypesAccounts = ref(<any>[
      {
        label: t('circuit.user'),
        value: shared_consts.AccountType.USER,
      },
      {
        label: t('circuit.conticollettivi'),
        value: shared_consts.AccountType.CONTO_DI_GRUPPO,
      },
    ]);

    function getFilterProvinceByRegion(recProvince: any, index: number, arr: any) {
      const recreg: any = searchList.value.find((rec) => rec.table === 'regions');
      if (recreg) {
        return recProvince.reg === recreg.value;
      } else {
        return true;
      }
    }

    function mounted() {
      usersList.value.listlinkreg = listlinksreg;

      searchList.value = [
        {
          visible: true,
          label: 'Regione',
          table: 'regions',
          key: 'idReg',
          type: costanti.FieldType.select,
          value: tools.getCookie(tools.COOK_SEARCH + 'regions_fr', costanti.FILTER_TUTTI),
          keycookie: '_fr',
          addall: true,
          arrvalue: [],
          filter: null,
          useinput: false,
          icon: 'fas fa-globe-europe',
        },
        {
          visible: true,
          label: 'Provincia',
          table: 'provinces',
          key: 'profile.resid_province',
          type: costanti.FieldType.select,
          value: tools.getCookie(
            tools.COOK_SEARCH + 'provinces_fr',
            costanti.FILTER_TUTTI
          ),
          keycookie: '_fr',
          addall: true,
          arrvalue: [],
          filter: getFilterProvinceByRegion,
          useinput: true,
          icon: 'flag',
          tablesel: 'provinces',
        },
      ];

      filtercustom.value = [];
      arrfilterand.value = [];

      const filt_loaded = tools.getCookie(
        tools.COOK_SEARCH + tools.FRIENDS_SEARCH,
        costanti.FIND_PEOPLE,
        true
      );
      filter.value = filt_loaded ? filt_loaded : costanti.FIND_PEOPLE;

      updateUserListRIS();

      sendCoinsToClick();
    }

    function extraparams_groups() {
      const lk_tab = 'mygroups';
      const lk_LF = 'userId';
      const lk_FF = '_id';
      const lk_as = 'group';
      const af_objId_tab = 'myId';

      return {
        lookup1: {
          lk_tab,
          lk_LF,
          lk_FF,
          lk_as,
          af_objId_tab,
          lk_proj: {
            groupname: 1,
            title: 1,
            descr: 1,
            photos: 1,
          },
        },
      };
    }

    function extraparams() {
      return {
        lookup1: {
          lk_tab: 'provinces',
          lk_LF: 'profile.resid_province',
          lk_FF: 'prov',
          lk_as: 'mycities',
          lk_proj: {
            username: 1,
            name: 1,
            surname: 1,
            verified_by_aportador: 1,
            'profile.handshake': 1,
            'profile.img': 1,
            'profile.mygroups': 1,
            'profile.qualifica': 1,
            'profile.note': 1,
            'profile.da_contattare': 1,
            'profile.resid_province': 1,
            'mycities.reg': 1,
            perm: 1,
          },
        },
      };
    }

    onMounted(mounted);

    async function updateUserListRIS() {
      const userStore = useUserStore();

      loading.value = true;

      await globalStore.getStatSite();

      usersList.value.list = receiveRislist;
      usersList.value.listgroup = receiveRislistgroup;
      // usersList.value.listlinkreg = listlinksreg

      loading.value = false;
    }

    async function sendCoinsToClick() {
      usersList.value.show = true;
      usersList.value.title = t('circuit.sendcoins');
      usersList.value.list = receiveRislist;
      usersList.value.listgroup = receiveRislistgroup;
    }

    return {
      userStore,
      tools,
      costanti,
      shared_consts,
      arrTypesAccounts,
      loading,
      contact,
      t,
      extraparams,
      colmyUserPeople,
      colmyUserGroup,
      searchList,
      options,
      searchType,
      updateUserListRIS,
      usersList,
      receiveRislist,
      receiveRislistgroup,
      tipoConto,
      CQRCode,
      extraparams_groups,
      filtercustom,
      arrfilterand,
    };
  },
});