import { useRoute, useRouter } from 'vue-router'
import { useQuasar } from 'quasar'
import { BannerCookies } from '@src/components/BannerCookies'
import { useI18n } from 'vue-i18n'
import { useGlobalStore } from '@store/globalStore'
import { useUserStore } from '@store/UserStore'
import { MyHeader } from '@src/components/MyHeader'
import { MyFooter } from '@src/components/MyFooter'
import { CFirstPageApp } from '@src/components/CFirstPageApp'
import { computed, onMounted, ref, watch } from 'vue'
import { CProvaPao } from '@src/components/CProvaPao'
import { tools } from '@tools'
import { toolsext } from '@store/Modules/toolsext'

import { Vue } from 'vue-class-component'

import 'animate.css';

export default {
  components: {
    appHeader: MyHeader,
    MyFooter,
    CFirstPageApp,
    CProvaPao,
    BannerCookies, /* , CPreloadImages */
  },
  setup() {
    const route = useRoute()

    const backgroundColor = 'whitesmoke'
    const $q = useQuasar()
    const userStore = useUserStore()
    const $router = useRouter()
    const $route = useRoute()
    const globalStore = useGlobalStore()
    const { t } = useI18n();

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

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

    const darkcookie = ref(false)

    watch(() => finishLoading.value, (newval: boolean, oldval: boolean) => {
      // console.log('watch finished', newval)
      if (newval) {
        tools.updateFonts()

      }

    })


    const listaRoutingNoLogin = ['/vreg?', '/offline']

    function meta() {
      return {
        title: t('msg.myAppName'),
        keywords: [{ name: 'keywords', content: 'associazione shen, centro olistico lugo' },
        { name: 'description', content: t('msg.myAppDescription') }],
        //   equiv: { 'http-equiv': 'Content-Type', 'content': 'text/html; charset=UTF-8' }
      }
    }

    function isScrolledIntoView(el: any) {
      const rect = el.getBoundingClientRect()
      const elemTop = rect.top
      const elemBottom = rect.bottom

      const isVisible = elemTop < window.innerHeight && elemBottom >= 0
      return isVisible
    }

    function scroll() {
      try {
        window.onscroll = () => {
          const scrolledTo = document.querySelector('.replace-with-your-element')

          if (scrolledTo && isScrolledIntoView(scrolledTo)) {
            // console.log('scrolled')
          }
        }
      } catch (e) {

      }
    }


    function mounted() {
      console.log('app mounted')
      darkcookie.value = tools.getCookie('darkmode', false, false, false) === '-1'

      globalStore.homescreen = $route.query.homescreen ? $route.query.homescreen : ''

      scroll()
    }



    async function crea() {
      // console.log('crea')
      tools.initprompt()

      tools.checkApp()

      try {
        if (import.meta.env.DEV) {
          console.info('SESSIONE IN SVILUPPO ! (DEV)')
          // console.info(process.env)
        }
        if (tools.isLocale()) {
          console.info('SESSIONE IN LOCALE !')
        }

        if (tools.isTest() && !import.meta.env.DEV) {
          console.info('SESSIONE IN TEST ! (TEST)')
        } else {
          if (import.meta.env.PROD) {
            console.info('SESSIONE IN PRODUZIONE!')
            // console.info(process.env)
          }
        }


        // Make autologin only if some routing

        // console.log('window.location.href', window.location.href)

        let chiamaautologin = true
        listaRoutingNoLogin.forEach((mystr) => {
          if (window.location.href.includes(mystr)) {
            chiamaautologin = false
          }
        })

        if (chiamaautologin) {
          // console.log('CHIAMA autologin_FromLocalStorage')
          const ris = await userStore.autologin_FromLocalStorage($router, $q)
          if (ris?.code === toolsext.ERR_RETRY_LOGIN) {
            setTimeout(() => {
              $router.replace('/signin');
            }, 100);
          }
        } else {
          globalStore.finishLoading = true
        }

        tools.updateFonts()

      } catch (e) {
        globalStore.finishLoading = true
        console.error('err APP', e)
      }

      if (globalStore.finishLoading) {
        console.log('Finish Loading')
      }

      // Calling the Server for updates ?
      // Check the verified_email
    }

    crea()

    onMounted(mounted)


    return {
      finishLoading,
      darkcookie,
    }
  },
}
