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

import { tools } from '@tools';

import { shared_consts } from '@src/common/shared_vuejs';
import { useI18n } from 'vue-i18n';
import { boot } from 'quasar/wrappers';
import { useRouter } from 'vue-router';
import { static_data } from '@src/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 '@src/components/CMyAvatar';
import { CMyFieldDb } from '@src/components/CMyFieldDb';
import { CSelectUserActive } from '@src/components/CSelectUserActive';
import { toolsext } from '@store/Modules/toolsext';
import { useGlobalStore } from '@store/globalStore';
import { useUserStore } from '@store/UserStore';
import { useProducts } from '@store/Products';

import MixinUsers from '../../mixins/mixin-users';
import { CMyCart, CSigninNoreg } from '@src/components';
import { costanti } from '@costanti';
import { useNotifStore } from '@src/store/NotifStore';

import { Platform } from 'quasar';

export default defineComponent({
  name: 'MyHeader',
  components: {
    drawer,
    messagePopover,
    CMyFieldDb,
    CMyAvatar,
    CSigninNoreg,
    CMyCart,
    notifPopover,
    coinsPopover,
    CSelectUserActive,
  },
  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 products = useProducts();
    const notifStore = useNotifStore();

    const { getnumItemsCart } = MixinUsers();

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

    const dark = ref(false);

    const leftDrawerOpen = ref(globalStore.leftDrawerOpen);

    const editOn = computed({
      get: () => globalStore.editOn,
      set: (val) => {
        tools.updateEditOn(val);
      },
    });

    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 {
        if (globalStore.homescreen) {
          return 'bg-blue';
        } 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) => {
        if (isfinishLoading.value) {
          $q.dark.set(value);
          tools.setCookie('darkmode', value ? '-1' : '0');
        }
      }
    );

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

      $q.dark.set(dark.value);
    }

    function uploadStart() {
      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();
      }

      try {
        if (window) {
          // Ascolta evento custom 'swUpdated' per notifica aggiornamento
          window.addEventListener(
            'swUpdated',
            async (event) => {
              // Chiedi conferma all’utente (qui con confirm, sostituisci con dialog Quasar se vuoi)
              const doUpdate = confirm('È disponibile una nuova versione. Vuoi aggiornare ora?');

              if (doUpdate) {
                // Invia messaggio al service worker per skipWaiting
                if (event.detail?.swWaiting) {
                  event.detail.swWaiting.postMessage({ action: 'skipWaiting' });
                }
              }
            },
            { once: true }
          );

          if ('serviceWorker' in navigator) {
            navigator.serviceWorker.addEventListener('controllerchange', () => {
              if (refreshing.value) return;
              refreshing.value = true;
              window.location.reload();
            });
          }
        }
      } catch (e) {
        console.error('Err', e.message);
      }
    }

    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;
    }
    function isEditor() {
      return userStore.isEditor;
    }

    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 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);

        tools.setLangAtt($q, $router, 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() {
      if (Platform.is.ios) {
        // Unregister Service Worker
        if ('serviceWorker' in navigator) {
          navigator.serviceWorker.getRegistrations().then((registrations) => {
            for (const registration of registrations) {
              registration.unregister();
            }
          });
        }

        // window.location.reload()
      } else {
        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 (import.meta.env.DEV) {
        strv = 'DEV ';
      } else if (tools.isTest()) {
        strv = 'TEST ';
      }
      return `${strv}v. ${import.meta.env.VITE_APP_VERSION}`;
    }

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

    function BeforeMount() {
      setDarkMode();

      // 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);

      tools.setLangAtt($q, $router, 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);
        });
      }

      nextTick(() => {
        if (tools.getCookie('menu3oriz') === '1') {
          if ($q.screen.width < 800) {
            leftDrawerOpen.value = false;
            // globalStore.leftDrawerOpen = false
          } else {
            leftDrawerOpen.value = true;
            globalStore.leftDrawerOpen = true;
          }
        } else if (tools.getCookie('menu3oriz') === '0') {
          leftDrawerOpen.value = false;
          globalStore.leftDrawerOpen = false;
        }
      });
    }

    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 getnumOrdersCart() {
      /* const arrorderscart = Products.orders.filter((rec) => rec.status < shared_consts.OrderStatus.COMPLETED)
      // const arrorderscart = Products.orders
      if (!!arrorderscart) {
        return arrorderscart.length
      }

       */
      return 0;
    }

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

    function toHome() {
      $router.push('/');
    }

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

    function clickMenu3Orizz() {
      leftDrawerOpen.value = !leftDrawerOpen.value;
      globalStore.leftDrawerOpen = leftDrawerOpen.value;

      tools.setCookie('menu3oriz', globalStore.leftDrawerOpen ? '1' : '0');
    }


    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,
      toHome,
      products,
      userStore,
      clickMenu3Orizz,
      isEditor,
      editOn,
    };
  },
});