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

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

import { CImgTitle } from '../CImgTitle/index'
import { CImgPoster } from '@/components/CImgPoster'
import { CTitle } from '@/components/CTitle/index'
import { CGridOriz } from '@/components/CGridOriz/index'
import { tools } from '@store/Modules/tools'
import { shared_consts } from '@/common/shared_vuejs'
import { LandingFooter } from '@/components/LandingFooter'
import { CMyActivities } from '@/components/CMyActivities'
import { CECommerce } from '@/components/CECommerce'
import { CAITools } from '@/components/CAITools'
import { CCatalogo } from '@/components/CCatalogo'
// import { CMapMarker } from '@src/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 '@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 '@/mixins/mixin-metatags'
import MixinBase from '@/mixins/mixin-base'
import { useQuasar } from 'quasar'
import { useI18n } from '@/boot/i18n'
import { useRouter } from 'vue-router'
import { LatLng } from 'leaflet'


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, CAITools,
    CMapComuni, CMapUsers, CMapGetCoordinates, CMapEditAddressByCoord,
    CDashGroup, CMovements, CGridOriz,
    // ,  //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: '',
    },
    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 slide = ref(0)
    const slide2 = ref(0)
    const disableSave = ref(true)
    const enableEdit = ref(false)
    const enableAdd = ref(true)
    const visushare = ref(false)

    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(() => {
      if ($q.screen.lt.sm) return 1
      if ($q.screen.lt.md) return 2
      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 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) {

      let newrec = globalStore.prepareAddNewElem(order, $q, t, props.myelem, 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)
    }

    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() {
      let mytext = await tools.sendMsgTelegramCmd(
        $q,
        t,
        shared_consts.MsgTeleg.SHARE_MSGREG,
        true
      )

      if (false) {
        social.value.description = mytext
        visushare.value = true
      }

    }

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

    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,
    }
  },

})