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

import 'animate.css';

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

    const backgroundColor = 'whitesmoke'
    const $q = useQuasar()
    const userStore = useUserStore()
    const $router = useRouter()
    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) {
      let rect = el.getBoundingClientRect()
      let elemTop = rect.top
      let elemBottom = rect.bottom

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

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

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


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

      scroll()
      tools.checkApp()
    }



    async function created() {
      try {
        if (process.env.DEV) {
          console.info('SESSIONE IN SVILUPPO ! (DEV)')
          // console.info(process.env)
        }
        if (tools.isTest() && !process.env.DEV) {
          console.info('SESSIONE IN TEST ! (TEST)')
        } else {
          if (process.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')
          await userStore.autologin_FromLocalStorage($router, $q)
        } else {
          globalStore.finishLoading = true
        }

        tools.updateFonts()

      } catch (e) {
        globalStore.finishLoading = true
      }

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

    onMounted(mounted)

    created()

    return {
      finishLoading,
      darkcookie,
    }
  },
}