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

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 { CCopyBtnSmall } from '../CCopyBtnSmall';
import { CContactUser } from '../CContactUser';
import { CQRCode } from '../CQRCode';
import { CFindUsers } from '../CFindUsers';
import { CUserInfoAccount } from '../CUserInfoAccount';
import { tools } from '@tools';
import { useQuasar } from 'quasar';

export default defineComponent({
  name: 'CSendRISTo',
  props: {},
  components: {
    CMyUser,
    CMyGroup,
    CUserInfoAccount,
    CCopyBtnSmall,
    CTitleBanner,
    CContactUser,
    CFindUsers,
    CQRCode,
  },
  setup(props) {
    const userStore = useUserStore();
    const globalStore = useGlobalStore();
    const circuitStore = useCircuitStore();
    const { t } = useI18n();
    const $q = useQuasar();
    const $router = useRouter();

    const showSendCoin = ref(false);
    const showReceiveCoin = ref(false);
    const receiveType = ref('link');
    const riscallrec = ref(<string>'');

    const btnInviaRIS = ref(null);

    const optionsReceive = ref([
      {
        label: 'Condividi il tuo Link',
        value: 'link',
      },
      /*{
        label: 'Rendi visibile il tuo profilo per 8 ore',
        value: 'showonlist',
      },*/
      {
        label: 'Genera il QR Code',
        value: 'qrcode',
      },
    ]);

    const tipoConto = ref(shared_consts.AccountType.USER);
    const loading = ref(false);
    const miolink = ref('');
    const sendRIS = ref('');
    const qtyRIS = ref('');
    const causal = ref('');
    const circuitpath = computed(() => {
      const circ = circuitStore.getCircuitByProvinceAndCard(
        userStore.my.profile.resid_province,
        userStore.my.profile.resid_card
      );
      return circ && circ.path ? circ.path : '';
    });

    watch(
      () => qtyRIS.value,
      (to: any, from: any) => {
        limitQuantity();
        miolink.value = userStore.getLinkProfileAndRIS('', qtyRIS.value, causal.value);
      }
    );
    watch(
      () => causal.value,
      (to: any, from: any) => {
        miolink.value = userStore.getLinkProfileAndRIS('', qtyRIS.value, causal.value);
      }
    );

    const showonreclist = ref(false);

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

    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 mounted() {
      miolink.value = userStore.getLinkProfileAndRIS('', qtyRIS.value);
    }

    function limitQuantity() {
      // Converte qtyRIS in stringa per verificare la lunghezza
      if (qtyRIS.value.length > 5) {
        qtyRIS.value = qtyRIS.value.substring(0, 5); // Limita a 5 caratteri
      }

      qtyRIS.value = qtyRIS.value.replace(',', '.');
    }

    function scrollaBottone() {
      const btnInviaRIS = document.getElementById('btnInviaRIS');
      if (btnInviaRIS) {
        const offset = 30; // spazio desiderato in pixel sopra il bottone
        const y = btnInviaRIS.getBoundingClientRect().top + window.scrollY - offset;
        window.scrollTo({ top: y, behavior: 'smooth' });
      }
    }

    function clickInviaRIS() {
      scrollaBottone();

      showSendCoin.value = !showSendCoin.value;
      if (showSendCoin.value) showReceiveCoin.value = !showSendCoin.value;
    }

    async function clickriceviRIS() {
      scrollaBottone();

      showReceiveCoin.value = !showReceiveCoin.value;
      if (showReceiveCoin.value) showSendCoin.value = !showReceiveCoin.value;
      if (showReceiveCoin.value) clickAddtoRecList();
    }

    async function clickAddtoRecList() {
      const risultato = await tools.addToTemporaryReceiverRIS(t);
      if (risultato) {
        riscallrec.value = risultato.msg;
        showonreclist.value = risultato.ris;
      }
    }

    onMounted(mounted);

    return {
      userStore,
      tools,
      costanti,
      shared_consts,
      arrTypesAccounts,
      tipoConto,
      loading,
      contact,
      circuitpath,
      sendRIS,
      miolink,
      qtyRIS,
      t,
      causal,
      limitQuantity,
      showSendCoin,
      optionsReceive,
      receiveType,
      showReceiveCoin,
      showonreclist,
      riscallrec,
      clickAddtoRecList,
      clickInviaRIS,
      clickriceviRIS,
      btnInviaRIS,
    };
  },
});