import type { PropType } from 'vue';
import {
  computed,
  defineComponent,
  onMounted,
  ref,
  toRef,
  watch,
  nextTick,
  onUnmounted,
  onUpdated,
} from 'vue';

import type { IOptCatalogo, ICoordGPS, IMyElem, ISocial } from '@/model';
import { IMyCard, IMyPage, IOperators } from '@/model';
import { useGlobalStore } from '@store/globalStore';

import { CImgTitle } from '../CImgTitle/index';
import { FeaturesSection } from '../FeaturesSection/index';
import { CImgPoster } from '@/components/CImgPoster';
import CSection from '@/components/CSection/CSection.vue';
import CRow from '@/components/CRow/CRow.vue';
import CColumn from '@/components/CColumn/CColumn.vue';
import { CProfileCompletitionBanner } from '@/components/CProfileCompletitionBanner/index';
import { CTitle } from '@/components/CTitle/index';
import { CGridOriz } from '@/components/CGridOriz/index';
import { ChatBot } from '@/components/ChatBot/index';
import { CCatalogList } from '@/components/CCatalogList/index';
import { CRaccoltaCataloghi } from '@/components/CRaccoltaCataloghi/index';
import { tools } from '@tools';
import { shared_consts } from '@/common/shared_vuejs';
import { LandingFooter } from '@/components/LandingFooter';
import { CMyActivities } from '@/components/CMyActivities';
import { CECommerce } from '@/components/CECommerce';
import { HomeRiso } from '@/components/HomeRiso';
import mycircuits from '@/views/user/mycircuits/mycircuits.vue';
import PageRis from '@/components/pageris/pageris.vue';
import { Riso_Home_Modern } from '@/components/Riso_Home_Modern';
import { InvitaAmico } from '@/components/InvitaAmico';
import { CMyVideoYoutube } from '@/components/CMyVideoYoutube';
import { editprofile } from '@/components/editprofile';
import { CStatMacro } from '@/components/CStatMacro';
import { CSearchProduct } from '@/components/CSearchProduct';
import { CPageViewStats } from '@/components/CPageViewStats';
import { CCardCarouselComp } from 'app/src/components/CCardCarouselComp';
import { CQRCode } from '@/components/CQRCode';
import { CAITools } from '@/components/CAITools';
import { CCatalogo } from '@/components/CCatalogo';
import { CRaccolta } from '@/components/CRaccolta';
// import { CMapMarker } from '@/components/CMapMarker.off'
import { CMapUsers } from '@/components/CMapUsers';
import { CMapGetCoordinates } from '@/components/CMapGetCoordinates';
import { CMapEditAddressByCoord } from '@/components/CMapEditAddressByCoord';
import { CMapComuni } from '@/components/CMapComuni';
import { COpenStreetMap } from '@/components/COpenStreetMap';
import { CCardCarousel } from '@/components/CCardCarousel';
import { CMyPage } from '@/components/CMyPage';
import { CMyPageIntro } from '@/components/CMyPageIntro';
import { CEventsCalendar } from '@/components/CEventsCalendar';
import { CMyEditor } from '@/components/CMyEditor';
import { CMyFieldRec } from '@/components/CMyFieldRec';
import { CSelectColor } from '@/components/CSelectColor';
import { CMainView } from '@/components/CMainView';
import { CMyProfileTutorial } from '@/components/CMyProfileTutorial';
import { CSendRISTo } from '@/components/CSendRISTo';
import { CDashboard } from '@/components/CDashboard';
import { CDashGroup } from '@/components/CDashGroup';
import { CMovements } from '@/components/CMovements';
import { CCheckAppRunning } from '@/components/CCheckAppRunning';
import { CStatusReg } from '@/components/CStatusReg';
import { CTitleBanner } from '@/components/CTitleBanner';
import { CCheckIfIsLogged } from '@/components/CCheckIfIsLogged';
import { CSelectFontSize } from '@/components/CSelectFontSize';
import { CNotifAtTop } from '@/components/CNotifAtTop';
import { CPresentazione } from '@/components/CPresentazione';
import { CRegistration } from '@/components/CRegistration';
import { CShareSocial } from '@/components/CShareSocial';
import { CMyImageGallery } from '@/components/CMyImageGallery';
import { CMyHeading } from '@/components/CMyHeading';
import { CMyList } from '@/components/CMyList';
import { CMyCode } from '@/components/CMyCode';
import { CMyDivider } from '@/components/CMyDivider';
import { CVisuVideoPromoAndPDF } from '@/components/CVisuVideoPromoAndPDF';

import MixinMetaTags from '@/mixins/mixin-metatags';
import MixinBase from '@/mixins/mixin-base';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { LatLng } from 'leaflet';

import { costanti } from '@costanti';
import objectId from 'app/src/js/objectId';

export default defineComponent({
  name: 'CMyElem',
  components: {
    CImgTitle,
    CTitle,
    PageRis,
    LandingFooter,
    CEventsCalendar,
    CCardCarousel,
    CProfileCompletitionBanner,
    COpenStreetMap,
    CMyPage,
    CMyPageIntro,
    InvitaAmico,
    HomeRiso,
    Riso_Home_Modern,
    CMyEditor,
    mycircuits,
    editprofile,
    CMyFieldRec,
    CSelectColor,
    CSelectFontSize,
    CImgPoster,
    CCheckIfIsLogged,
    CStatusReg,
    CDashboard,
    CMainView,
    CNotifAtTop,
    CPresentazione,
    CCardCarouselComp,
    CMyActivities,
    CMyProfileTutorial,
    CSendRISTo,
    CTitleBanner,
    CShareSocial,
    CCheckAppRunning,
    CRegistration,
    CVisuVideoPromoAndPDF,
    CECommerce,
    CCatalogo,
    CRaccolta,
    CAITools,
    CStatMacro,
    CMapComuni,
    CMapUsers,
    CMapGetCoordinates,
    CMapEditAddressByCoord,
    CDashGroup,
    CMovements,
    CGridOriz,
    FeaturesSection,
    CQRCode,
    CCatalogList,
    CSearchProduct,
    CRaccoltaCataloghi,
    CPageViewStats,
    ChatBot,
    CSection,
    CRow,
    CColumn,
    CMyVideoYoutube,
    CMyDivider,
    CMyImageGallery,
    CMyHeading,
    CMyList,
    CMyCode,
    // ,  //CMapMarker,
  },
  emits: ['selElemClick'],
  props: {
    myelem: {
      type: Object as PropType<IMyElem>,
      required: true,
    },
    selElem: {
      type: Object as PropType<IMyElem>,
      required: false,
    },
    path: {
      type: String,
      required: false,
      default: '',
    },
    idPage: {
      type: String,
      required: false,
      default: '',
    },
    editOn: {
      type: Boolean,
      required: false,
      default: false,
    },
    addOn: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  setup(props, { emit }) {
    const globalStore = useGlobalStore();

    const { setmeta, getsrcbyimg } = MixinMetaTags();
    const { setValDb, getValDb } = MixinBase();

    const $router = useRouter();

    const $q = useQuasar();
    const { t } = useI18n();

    const animare = ref(0);
    const animarecard = ref(0);
    const slide = ref(0);
    const slide2 = ref(0);
    const disableSave = ref(true);
    const enableEdit = ref(false);
    const enableAdd = ref(true);
    const visushare = ref(false);

    const htmlContainer = ref(null);

    const tabcatalogo = ref('griglia');

    const enablePwa = computed(() => globalStore.site.confpages?.enablePwa);

    const social = ref(<ISocial>{});

    const mostraInviti = ref(false);

    const neworder = ref(<number | undefined>0);

    const myel = ref(<IMyElem>{});

    const newtype = ref(<any>'');

    const canShowVersion = ref(false);
    const nascondiBottone = ref(false);

    const isAppRunning = computed(() => globalStore.isAppRunning);

    const cardGroupMaxWidth = computed(() => {
      return tools.getwidth($q) + ' px';
    });

    const currentCardsPerSlide = computed(() => {
      return myel.value.num2 ? myel.value.num2 : 2; // cardsPerSlide
    });

    // Raggruppa le card in base al numero di card per slide
    const cardGroups = computed(() => {
      const cards = myel.value.listcards || [];
      const groups = [];

      for (let i = 0; i < cards.length; i += currentCardsPerSlide.value) {
        groups.push(cards.slice(i, i + currentCardsPerSlide.value));
      }

      if (!groups.length) {
        groups.push([
          {
            _id: objectId(),
            imagefile: '',
            alt: '',
            description: '',
            vers_img: 0,
          } as IMyCard,
        ]);
      }

      return groups;
    });

    const coordaddr = ref(<ICoordGPS>{ address: '', coordinates: [0, 0] });
    const speedSafe = computed(() => (myel.value as any).speed ?? 0);

    const carouselRef = ref(<any>null);
    const isAtStart = ref(true);
    const isAtEnd = ref(false);
    const activeIndex = ref(0);

    watch(
      () => myel.value.order,
      (value, oldval) => {
        mounted();
      }
    );

    function getArrDisciplines() {
      return globalStore.disciplines.filter((rec: any) => rec.showinhome);
    }

    function getheightgallery() {
      if (tools.isMobile()) return '400px';
      else return '600px';
    }

    function saveElem(exit?: boolean) {
      // Save Elem record
      const myelem = props.myelem;
      myelem.order = neworder.value;
      globalStore.saveMyElem($q, t, myelem).then((ris) => {
        if (ris) {
          // OK
          disableSave.value = true;
          if (exit) enableEdit.value = false;
        }
      });
    }

    function addNewElem(order?: number) {
      const newrec = globalStore.prepareAddNewElem(
        order,
        $q,
        t,
        props.myelem,
        { idPage: props.idPage, path: props.path },
        newtype.value
      );
    }

    function dupElem(order?: number) {
      const newrec = props.myelem;

      newrec._id = undefined;
      newrec.order = order ? order : newrec.order! + 10;

      globalStore.addNewElem($q, t, newrec, newrec);
    }

    function modifElem() {
      disableSave.value = false;
    }

    const checkScrollPosition = () => {
      const container = carouselRef.value;
      if (!container || !myel.value || !myel.value.listcards) return;

      isAtStart.value = container.scrollLeft <= 0;
      isAtEnd.value =
        container.scrollLeft + container.clientWidth >= container.scrollWidth - 1;

      const cardWidth = container.scrollWidth / myel.value.listcards.length;
      activeIndex.value = Math.round(container.scrollLeft / cardWidth);
    };

    function mounted() {
      myel.value = props.myelem;
      neworder.value = props.myelem.order;

      setTimeout(() => {
        canShowVersion.value = true;
      }, 60000);

      setTimeout(() => {
        executeScript();
      }, 500);

      if (props.myelem) newtype.value = props.myelem.type;

      nextTick(() => {
        checkScrollPosition();
        carouselRef.value?.addEventListener('scroll', checkScrollPosition);
      });
    }

    function clickOnElem() {
      if (props.editOn) {
        enableEdit.value = true;
        // console.log('selElemClick', props.myelem)
        emit('selElemClick', props.myelem);
      }
    }

    function getClass() {
      let mycl = '';
      if (props.myelem.align === shared_consts.ALIGNTYPE.CENTER) {
        mycl += ' align_center';
      } else if (props.myelem.align === shared_consts.ALIGNTYPE.RIGHT) {
        mycl += ' align_right';
      } else if (props.myelem.align === shared_consts.ALIGNTYPE.LEFT) {
        mycl += ' align_left';
      }

      if (props.myelem.class2) mycl += ' ' + props.myelem.class2;

      if (props.selElem && props.editOn) {
        if (props.myelem._id === props.selElem._id) mycl += ' selectedElem';
      }

      return mycl;
    }

    function showFit() {
      if (props.myelem && props.myelem.type)
        return [shared_consts.ELEMTYPE.TEXT].includes(props.myelem.type);
      else return false;
    }

    function PagLogin() {
      $router.replace('/signin');
    }

    async function clickshare() {
      tools.addToTemporaryLinkReg(t);

      const mytext = await tools.sendMsgTelegramCmd(
        $q,
        t,
        shared_consts.MsgTeleg.SHARE_MSGREG,
        true
      );
    }

    // Classe per le colonne delle card
    function cardColumnClass() {
      const width = 12 / currentCardsPerSlide.value;
      return `col-${width}`;
    }

    function updateCatalogoEmit(updatedCatalogo?: IOptCatalogo) {
      if (!updatedCatalogo) return;
      console.log('CMyElem: updateCatalogoEmit');
      myel.value.catalogo = updatedCatalogo;
    }

    function naviga(path?: string): void {
      if (path) {
        $router.push(path);
      } else {
        // default fallback route
        $router.push('/');
      }
    }

    const updateApp = async () => {
      // Invia il messaggio al Service Worker per saltare l'attesa
      const registration = await navigator.serviceWorker.getRegistration();
      if (registration?.waiting) {
        registration.waiting.postMessage({ type: 'SKIP_WAITING' });
      }

      // Ricarica la pagina
      window.location.reload();
    };

    onMounted(mounted);

    const isNewVersionAvailable = computed(() => {
      return canShowVersion.value ? globalStore.isNewVersionAvailable : false;
    });

    const onInvitoInviato = (data: any) => {
      console.log('Invito inviato:', data);
      mostraInviti.value = false;
    };

    const onTelegramClick = () => {
      // Qui la tua logica esistente per Telegram
      console.log('Invio via Telegram...');
    };

    const executeScript = () => {
      if (myel.value.container3 && htmlContainer.value) {
        nextTick(() => {
          try {
            console.log('S  guire:', myel.value.container3);

            const fn = new Function('element', myel.value.container3);
            fn(htmlContainer.value);
          } catch (e) {
            console.error('Script execution error:', e);
          }
        })
      }
    };

    watch(() => myel.value.container3, executeScript);
    watch(() => myel.value.containerHtml, executeScript); // AGGIUNGI ANCHE QUESTO


    onUpdated(executeScript);

    return {
      onInvitoInviato,
      onTelegramClick,
      tools,
      shared_consts,
      getArrDisciplines,
      getheightgallery,
      slide,
      slide2,
      animare,
      setmeta,
      getsrcbyimg,
      saveElem,
      myel,
      disableSave,
      modifElem,
      addNewElem,
      newtype,
      neworder,
      enableEdit,
      enableAdd,
      clickOnElem,
      getClass,
      showFit,
      getValDb,
      dupElem,
      globalStore,
      PagLogin,
      visushare,
      social,
      clickshare,
      isAppRunning,
      coordaddr,
      isAtStart,
      isAtEnd,
      activeIndex,
      carouselRef,
      cardColumnClass,
      cardGroups,
      currentCardsPerSlide,
      animarecard,
      updateCatalogoEmit,
      tabcatalogo,
      costanti,
      naviga,
      speedSafe,
      t,
      cardGroupMaxWidth,
      isNewVersionAvailable,
      enablePwa,
      mostraInviti,
      nascondiBottone,
      htmlContainer,
    };
  },
});