import { useQuasar } from 'quasar'
import {
  defineComponent, onBeforeMount, onBeforeUnmount, onMounted, ref, toRefs, watch, inject, computed,
} from 'vue'

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

import { shared_consts } from '@src/common/shared_vuejs'
import { useI18n } from '@src/boot/i18n'
import { boot } from 'quasar/wrappers'
import { useRouter } from 'vue-router'
import { static_data } from '@/db/static_data'
import messagePopover from '../../layouts/toolbar/messagePopover/messagePopover.vue'
import notifPopover from '../../layouts/toolbar/notifPopover/notifPopover.vue'
import coinsPopover from '../../layouts/toolbar/coinsPopover/coinsPopover.vue'
import drawer from '../../layouts/drawer/drawer.vue'
import { CMyAvatar } from '@/components/CMyAvatar'
import { CMyFieldDb } from '@/components/CMyFieldDb'
import { toolsext } from '@store/Modules/toolsext'
import { useGlobalStore } from '@store/globalStore'
import { useTestStore } from '@store/testStore'
import { useUserStore } from '@store/UserStore'

import MixinUsers from '../../mixins/mixin-users'
import { CMyCart, CSigninNoreg } from '@/components'
import { costanti } from '@costanti'

export default defineComponent({
  name: 'MyHeader',
  components: {
    drawer, messagePopover,
    CMyFieldDb, CMyAvatar, CSigninNoreg, CMyCart, notifPopover, coinsPopover
  },
  props: {
    extraContent: {
      required: false,
      default: '',
    },
    clBase: {
      required: false,
      default: '',
    },
  },

  setup() {
    const $q = useQuasar()
    const { t } = useI18n()
    const $router = useRouter()

    const isUserNotAuth = ref(false)
    const iconConn = ref('wifi')
    const clIconConn = ref('clIconOnline')
    const strConn = ref('')
    const langshort = ref('')
    const clCloudUpload = ref('')
    const clCloudDownload = ref('')
    const clCloudUp_Indexeddb = ref('')
    const tabcmd = ref('')
    const clCloudDown_Indexeddb = ref('clIndexeddbsend')
    const photo = ref('')
    const visuimg = ref(true)

    const userStore = useUserStore()
    const globalStore = useGlobalStore()
    const testStore = useTestStore()

    const site = computed(() => globalStore.site)
    const isfinishLoading = computed(() => globalStore.finishLoading)

    const dark = ref(false)

    const getClassColorHeader = computed(() => {
      // if (tools.isTest()) return 'bg-light-blue'
      // if (tools.isDebug()) return 'bg-info'
      if (globalStore.site && globalStore.site.confpages?.col_toolbar)
        return 'bg-' + globalStore.site.confpages?.col_toolbar
      else
        return 'bg-light-blue'
    })

    const getColorText = computed(() => {
      if (globalStore.site && globalStore.site.confpages?.col_toolbar === 'white')
        return 'black'
      else
        return 'white'
    })

    watch(() => dark.value, (value: any, oldval: any) => {
      $q.dark.set(value)
      tools.setCookie('darkmode', value ? '-1' : '0')
    })

    function uploadStart() {
      dark.value = tools.getCookie('darkmode', false, false, false) === '-1'

      $q.dark.set(dark.value)

      BeforeMount()
    }

    watch(() => globalStore.finishLoading, (value: any, oldval: any) => {
      if (value) {
        uploadStart()
      }
    })

    const data = ref({
      registration: null,
      updateExists: false,
    } as any)

    const refreshing = ref(false)

    const stateconn = ref(globalStore.stateConnection)

    function updateAvailable(event: any) {
      console.log(event)
      data.value.registration = event.detail
      data.value.updateExists = true
      RefreshApp() // update automatically
    }

    function created() {

      if (isfinishLoading.value) {
        uploadStart()
      }
      document.addEventListener('swUpdated', updateAvailable, { once: true })
      navigator.serviceWorker.addEventListener('controllerchange', () => {
        // We'll also need to add 'refreshing' to our data originally set to false.
        if (refreshing.value)
          return
        refreshing.value = true
        // Here the actual reload of the page occurs
        window.location.reload()
      })
    }

    const {
      getUsernameChatByMsg,
      getMyUsername,
      Username,
      myName,
      mySurname,
      myCell,
      MadeGift,
      Email,
      getMyImg,
      getMyImgforIcon,
      getImgByMsg,
      getUserByUsername,
      getImgByUsername,
      isValidUsername,
      getNumMsg,
      getNumMsgUnread,
      getMsgText,
      paotest } = MixinUsers()

    function isonline() {
      return globalStore.stateConnection === 'online'
    }

    function isAdmin() {
      return userStore.isAdmin
    }

    function isManager() {
      return userStore.isManager
    }

    const isSocio = computed(() => userStore.my.profile.socio)

    function isSocioResidente() {
      return userStore.my.profile.socioresidente
    }

    function isConsiglio() {
      return userStore.my.profile.consiglio
    }

    function getcolormenu() {
      return isSocio.value ? 'green-7' : 'white'
    }

    function isFacilitatore() {
      return userStore.isFacilitatore
    }

    function isZoomeri() {
      return userStore.isZoomeri
    }

    function isTratuttrici() {
      return userStore.isTratuttrici
    }

    function conndata_changed() {
      return globalStore.connData
    }

    function snakeToCamel(str: string) {
      return str.replace(/(-\w)/g, (m) => m[1].toUpperCase())
    }

    function setLangAtt(mylang: string) {

      console.log('LANG =', mylang)
      // console.log('PRIMA $q.lang.isoName', $q.lang.isoName)

      // dynamic import, so loading on demand only
      import(`quasar/lang/${mylang}`).then((lang2: any) => {
        $q.lang.set(lang2.default)

        import('../../statics/i18n').then(() => {
          // console.log('MY LANG DOPO=', $q.lang.isoName)
        })
      })

      globalStore.addDynamicPages($router)
    }

    function setshortlang(mylang: string) {
      static_data.lang_available.forEach((langavail: any) => {
        if (langavail.value === mylang) {
          langshort.value = langavail.short
          return langshort.value
        }
      })
    }

    function isNewVersionAvailable() {
      return globalStore.isNewVersionAvailable
    }

    function closeAll() {
      globalStore.rightNotifOpen = false
      globalStore.rightCartOpen = false
      globalStore.rightDrawerOpen = false
      globalStore.rightCoinsOpen = false
    }

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

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

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

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

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

    const lang = computed({
      get: () => $q.lang.isoName,
      set: mylang => {
        // console.log('set lang', $q.lang.getLocale(), 'passato', mylang)
        $q.lang.set(snakeToCamel(mylang))
        // tools.showNotif($q, 'IMPOSTA LANG= ' + $i18n.locale)
        // console.log('IMPOSTA LANG= ' + $i18n.locale)

        let mylangtopass = mylang

        mylangtopass = toolsext.checkLangPassed($q, $router, mylangtopass)

        userStore.setlang($q, $router, mylangtopass)

        setshortlang(mylangtopass)

        setLangAtt(mylangtopass)

        userStore.setLangServer()
      },
    })

    watch(() =>
      stateconn,
      // @ts-ignore
      (value: string, oldValue: string) => {
        globalStore.stateConnection = value
      },
    )

    watch(
      conndata_changed,
      (value, oldValue) => {
        clCloudUpload.value = (value.uploading_server === 1) ? 'clCloudUpload send' : 'clCloudUpload'
        clCloudUpload.value = (value.downloading_server === 1) ? 'clCloudUpload receive' : 'clCloudUpload'
        clCloudUp_Indexeddb.value = (value.uploading_indexeddb === 1) ? 'clIndexeddb send' : 'clIndexeddb'
        clCloudUp_Indexeddb.value = (value.downloading_indexeddb === 1) ? 'clIndexeddb receive' : 'clIndexeddb'

        /* clCloudUpload.value = (value.uploading_server === -1) ? 'clCloudUpload error' : clCloudUpload
        clCloudUpload.value = (value.downloading_server === -1) ? 'clCloudUpload error' : clCloudDownload
        clCloudUp_Indexeddb.value = (value.uploading_indexeddb === -1) ? 'clIndexeddb error' : clCloudUp_Indexeddb
        clCloudUp_Indexeddb.value = (value.downloading_indexeddb === -1) ? 'clIndexeddb error' : clCloudDown_Indexeddb

         */
      },
    )

    /*
  @Watch('conn_changed', { immediate: true, deep: true })
  function changeconn_changed(value: string, oldValue: string) {
    if (value !== oldValue) {

      // console.log('SSSSSSSS: ', value, oldValue)

      const color = (value === 'online') ? 'positive' : 'warning'
      const statoconn = t('connection.conn') + ' ' + ((value === 'online') ? t('connection.online') : t('connection.offline'))

      if (site.confpages.showConnected) {

        if (!!oldValue) {
          tools.showNotif($q, statoconn, {
            color,
            icon: 'wifi'
          })
        }

        changeIconConn()
      }
    }
  }

     */

    function RefreshApp() {
      // Unregister Service Worker
      /*
      navigator.serviceWorker.getRegistrations().then((registrations) => {
        for (const registration of registrations) {
          registration.unregister()
        }
      })
      window.location.reload() */

      data.value.updateExists = false
      // Make sure we only send a 'skip waiting' message if the SW is waiting
      if (!data.value.registration || !data.value.registration.waiting) return
      // Send message to SW to skip the waiting and activate the new SW
      data.value.registration.waiting.postMessage({ type: 'SKIP_WAITING' })
    }

    function changeIconConn() {
      iconConn.value = globalStore.stateConnection === 'online' ? 'wifi' : 'wifi_off'
      clIconConn.value = globalStore.stateConnection === 'online' ? 'clIconOnline' : 'clIconOffline'
    }

    function getAppVersion() {
      // return "AA"
      let strv = ''
      if (process.env.DEV) {
        strv = 'DEV '
      } else if (tools.isTest()) {
        strv = 'TEST '
      }
      return `${strv}v. ${process.env.APP_VERSION}`
    }

    function getLangAtt() {
      return $q.lang.isoName
    }

    function BeforeMount() {
      // Estrai la Lang dal Localstorage
      if (!globalStore.finishLoading)
        return;

      // console.log('$q.i18n=', $q.i18n, '$q.getLocale()=', $q.lang.isoName)
      const mybrowserLang = getLangAtt()
      // tools.showNotif($q, 'prima: ' + String(my))

      let mylang = tools.getItemLS(toolsext.localStorage.lang)
      if (mylang === '') {
        if (navigator) {
          mylang = navigator.language
          // console.log(`LANG2 NAVIGATOR ${mylang}`)
        } else {
          mylang = $q.lang.isoName
        }

        // console.log('IMPOSTA LANGMY', mylang)
      }

      mylang = toolsext.checkLangPassed($q, $router, mylang)

      setLangAtt(mylang)
      setshortlang(mylang)
    }

    function mounted() {
      // Test this by running the code snippet below and then
      // use the "TableOnlyView" checkbox in DevTools Network panel

      // console.log('Event LOAD')
      if (window) {
        window.addEventListener('load', () => {
          // console.log('2) ENTERING Event LOAD')

          function updateOnlineStatus(event: any) {
            if (navigator.onLine) {
              console.log('EVENT ONLINE!')
              // handle online status
              globalStore.setStateConnection('online')
              // mychangeIconConn()
            } else {
              console.log('EVENT OFFLINE!')
              // handle offline status
              globalStore.setStateConnection('offline')
              // mychangeIconConn()
            }
          }

          window.addEventListener('online', updateOnlineStatus)
          window.addEventListener('offline', updateOnlineStatus)
        })
      }
    }

    function imglogo() {
      return `../../${tools.getimglogo()}`
    }

    function getappname() {
      return tools.getappname(tools.isMobile())

    }

    function toggleanimation() {
      console.log('toggleanimation')
      visuimg.value = false
      setTimeout(() => {
        visuimg.value = true
      }, 100)
    }

    function logoutHandler() {
      userStore.logout()
        .then(() => {
          // $router.replace('/logout')
          //
          // setTimeout(() => {
          //   $router.replace('/')
          // }, 1000)

          tools.showNotif($q, t('logout.uscito'), { icon: 'exit_to_app' })
        })
    }

    function clickregister() {
      rightDrawerOpen.value = false

      $router.replace('/signup')
    }

    function getnumItemsCart() {
      /* const arrcart = Products.cart
      if (!!arrcart) {
        if (!!arrcart.items) {
          const total = arrcart.items.reduce((sum, item) => sum + item.order.quantity, 0)
          return total
        }
      }

       */
      return 0
    }

    function getnumOrdersCart() {
      /* const arrorderscart = Products.orders.filter((rec) => rec.status < shared_consts.OrderStatus.RECEIVED)
      // const arrorderscart = Products.orders
      if (!!arrorderscart) {
        return arrorderscart.length
      }

       */
      return 0
    }

    function getcart() {
      // return Products.cart
      return null
    }


    function changecmd(value: any) {
      console.log('changecmd', value)
      globalStore.changeCmdClick(value)
    }

    onBeforeMount(BeforeMount)
    onMounted(mounted)

    created()

    return {
      static_data,
      globalStore,
      leftDrawerOpen,
      rightDrawerOpen,
      rightCartOpen,
      rightNotifOpen,
      rightCoinsOpen,
      lang,
      langshort,
      getnumOrdersCart,
      t,
      isonline,
      isAdmin,
      isManager, isSocio, isSocioResidente, isConsiglio, getcolormenu,
      isNewVersionAvailable,
      getAppVersion,
      RefreshApp,
      changecmd,
      imglogo,
      getappname,
      toggleanimation,
      getClassColorHeader,
      getcart,
      getnumItemsCart,
      isFacilitatore,
      isZoomeri,
      isTratuttrici,
      getUsernameChatByMsg,
      getMyUsername,
      Username,
      myName,
      mySurname,
      myCell,
      MadeGift,
      Email,
      getMyImg,
      getMyImgforIcon,
      getImgByMsg,
      getUserByUsername,
      getImgByUsername,
      isValidUsername,
      getNumMsg,
      getNumMsgUnread,
      getMsgText,
      paotest,
      logoutHandler,
      isUserNotAuth,
      tools,
      data,
      site,
      isfinishLoading,
      getColorText,
      costanti,
      dark,
      iconConn,
      clIconConn,
    }
  },

})