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

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

import { CImgTitle } from '../CImgTitle/index';
import { CImgPoster } from '@src/components/CImgPoster';
import CSection from '@src/components/CSection/CSection.vue';
import CRow from '@src/components/CRow/CRow.vue';
import CColumn from '@src/components/CColumn/CColumn.vue';
import { CTitle } from '@src/components/CTitle/index';
import { CGridOriz } from '@src/components/CGridOriz/index';
import { ChatBot } from '@src/components/ChatBot/index';
import { CCatalogList } from '@src/components/CCatalogList/index';
import { CRaccoltaCataloghi } from '@src/components/CRaccoltaCataloghi/index';
import { tools } from '@tools';
import { shared_consts } from '@src/common/shared_vuejs';
import { LandingFooter } from '@src/components/LandingFooter';
import { CMyActivities } from '@src/components/CMyActivities';
import { CECommerce } from '@src/components/CECommerce';
import { CStatMacro } from '@src/components/CStatMacro';
import { CSearchProduct } from '@src/components/CSearchProduct';
import { CPageViewStats } from '@src/components/CPageViewStats';
import { CQRCode } from '@src/components/CQRCode';
import { CAITools } from '@src/components/CAITools';
import { CCatalogo } from '@src/components/CCatalogo';
import { CRaccolta } from '@src/components/CRaccolta';
// import { CMapMarker } from '@src/components/CMapMarker.off'
import { CMapUsers } from '@src/components/CMapUsers';
import { CMapGetCoordinates } from '@src/components/CMapGetCoordinates';
import { CMapEditAddressByCoord } from '@src/components/CMapEditAddressByCoord';
import { CMapComuni } from '@src/components/CMapComuni';
import { COpenStreetMap } from '@src/components/COpenStreetMap';
import { CCardCarousel } from '@src/components/CCardCarousel';
import { CMyPage } from '@src/components/CMyPage';
import { CMyPageIntro } from '@src/components/CMyPageIntro';
import { CEventsCalendar } from '@src/components/CEventsCalendar';
import { CMyEditor } from '@src/components/CMyEditor';
import { CMyFieldRec } from '@src/components/CMyFieldRec';
import { CSelectColor } from '@src/components/CSelectColor';
import { CMainView } from '@src/components/CMainView';
import { CMyProfileTutorial } from '@src/components/CMyProfileTutorial';
import { CSendRISTo } from '@src/components/CSendRISTo';
import { CDashboard } from '@src/components/CDashboard';
import { CDashGroup } from '@src/components/CDashGroup';
import { CMovements } from '@src/components/CMovements';
import { CCheckAppRunning } from '@src/components/CCheckAppRunning';
import { CStatusReg } from '@src/components/CStatusReg';
import { CTitleBanner } from '@src/components/CTitleBanner';
import { CCheckIfIsLogged } from '@src/components/CCheckIfIsLogged';
import { CSelectFontSize } from '@src/components/CSelectFontSize';
import { CNotifAtTop } from '@src/components/CNotifAtTop';
import { CPresentazione } from '@src/components/CPresentazione';
import { CRegistration } from '@src/components/CRegistration';
import { CShareSocial } from '@src/components/CShareSocial';
import { CVisuVideoPromoAndPDF } from '@src/components/CVisuVideoPromoAndPDF';

import MixinMetaTags from '@src/mixins/mixin-metatags';
import MixinBase from '@src/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';

export default defineComponent({
  name: 'CMyElem',
  components: {
    CImgTitle,
    CTitle,
    LandingFooter,
    CEventsCalendar,
    CCardCarousel,
    COpenStreetMap,
    CMyPage,
    CMyPageIntro,
    CMyEditor,
    CMyFieldRec,
    CSelectColor,
    CSelectFontSize,
    CImgPoster,
    CCheckIfIsLogged,
    CStatusReg,
    CDashboard,
    CMainView,
    CNotifAtTop,
    CPresentazione,
    CMyActivities,
    CMyProfileTutorial,
    CSendRISTo,
    CTitleBanner,
    CShareSocial,
    CCheckAppRunning,
    CRegistration,
    CVisuVideoPromoAndPDF,
    CECommerce,
    CCatalogo,
    CRaccolta,
    CAITools,
    CStatMacro,
    CMapComuni,
    CMapUsers,
    CMapGetCoordinates,
    CMapEditAddressByCoord,
    CDashGroup,
    CMovements,
    CGridOriz,
    CQRCode,
    CCatalogList,
    CSearchProduct,
    CRaccoltaCataloghi,
    CPageViewStats,
    ChatBot,
    CSection,
    CRow,
    CColumn,
    // ,  //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 tabcatalogo = ref('griglia');

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

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

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

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

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

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

      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;

      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.CEHTER) {
        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('/');
      }
    }

    onMounted(mounted);

    return {
      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,
    };
  },
});