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

import { tools } from '@store/Modules/tools'
import { costanti } from '@costanti'
import { useGlobalStore } from '@store/globalStore'
import { useUserStore } from '@store/UserStore'

import { shared_consts } from '@/common/shared_vuejs'
import { useI18n } from '@/boot/i18n'
import { toolsext } from '@store/Modules/toolsext'
import { useQuasar } from 'quasar'

import QrcodeVue from 'qrcode-vue3'

import { QrStream, QrCapture, QrDropzone } from 'vue3-qr-reader'
import { useRouter } from 'vue-router'


export default defineComponent({
  name: 'CQRCode',
  emits: [''],
  props: {
    link: {
      type: String,
      required: false,
      default: '',
    },
    textlink: {
      type: String,
      required: false,
      default: '',
    },
    read: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  components: {
    QrcodeVue, QrStream,
    QrCapture,
    QrDropzone
  },
  setup(props, { attrs, slots, emit }) {
    const { t } = useI18n()
    const $q = useQuasar()
    const globalStore = useGlobalStore()
    const userStore = useUserStore()
    const $router = useRouter()

    const state = reactive({
      data: null
    })

    function onDecode(data: any) {
      if (data)
        state.data = data
    }

    const text = ref('');

    function naviga(path: string) {
      $router.push(path)
    }

    onMounted(mounted)

    function mounted() {
      // ...
    }

    return {
      t,
      tools,
      costanti,
      toolsext,
      text,
      userStore,
      ...toRefs(state),
      onDecode,
      naviga,
    }
  },
})