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

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

import { CImgTitle } from '../CImgTitle/index'
import { CTitle } from '@/components/CTitle/index'
import { tools } from '@store/Modules/tools'
import { shared_consts } from '@/common/shared_vuejs'
import LandingFooter from '@/components/LandingFooter/LandingFooter'
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 MixinMetaTags from '@/mixins/mixin-metatags'

export default defineComponent({
  name: 'CMyElem',
  components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar, CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro },
  props: {
    myelem: {
      type: Object as PropType<IMyElem>,
      required: true,
    },
  },
  setup(props) {
    const globalStore = useGlobalStore()

    const { setmeta, getsrcbyimg } = MixinMetaTags()

    const animare = ref(0)
    const slide = ref(0)
    const slide2 = ref(0)

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

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

    return {
      tools,
      shared_consts,
      getArrDisciplines,
      getheightgallery,
      slide,
      slide2,
      animare,
      setmeta,
      getsrcbyimg,
    }
  },

})