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

import { IMyElem, IMyPage } from '@src/model'
import { useGlobalStore } from '@store/globalStore'
import { LandingFooter } from '@/components/LandingFooter'
import { CMyElem } from '@/components/CMyElem'
import { CMyEditElem } from '@/components/CMyEditElem'
import { CMyPageElem2 } from '@/components/CMyPageElem2'

import { CImgTitle } from '../CImgTitle/index'
import { CTitle } from '../CTitle/index'
import { tools } from '@store/Modules/tools'
import { useQuasar } from 'quasar'
import { useI18n } from '@/boot/i18n'
import { shared_consts } from '@/common/shared_vuejs'
import objectId from '@src/js/objectId'

export default defineComponent({
  name: 'CMyPageElem',
  components: { LandingFooter, CImgTitle, CTitle, CMyElem, CMyEditElem, CMyPageElem2 },
  props: {
    title: String,
    mypath: {
      type: String,
      required: true,
    },
    img: {
      type: String,
      required: false,
      default: '',
    },
    imgbackground: {
      type: String,
      required: false,
      default: '',
    },
    sizes: {
      type: String,
      required: false,
      default: '',
    },
    styleadd: {
      type: String,
      required: false,
      default: '',
    },
    nofooter: {
      type: Boolean,
      required: false,
      default: false,
    },
  },

  setup(props) {
    const rec = ref<IMyPage | null>(null)
    const mypathin = toRef(props, 'mypath')

    const $q = useQuasar()

    const { t } = useI18n()
    const globalStore = useGlobalStore()

    const editOn = computed({
      get (): boolean {
        return !!globalStore.editOn ? globalStore.editOn : false
      },

      set (value: boolean) {
        return globalStore.editOn = value
      }
    })
    const visuEditor = ref(false)
    const addOn = ref(false)
    const myelemVoid = ref({ _id: objectId(), active: true, type: shared_consts.ELEMTYPE.TEXT, container: '...', path: mypathin.value } as IMyElem)


    const selElem = ref(globalStore.selElem)
    const site = ref(globalStore.site)

    const myelems = computed(() => {
      if (mypathin.value)
        return globalStore.getMyElems(mypathin.value)
      else
        return null
    })

    function load() {
      console.log('load', mypathin.value)

      if (mypathin.value !== '') {
        globalStore.loadPage('/' + mypathin.value, 'cmypageelem').then(ris => {
          rec.value = ris
        })
      }

      if (tools.isManager()) {
        console.log('getcookie: ', editOn.value, mypathin.value)
      }
    }

    watch(() => props.mypath, (to: string, from: string) => {
      console.log('... load', mypathin.value, props.mypath)
      selElem.value = {}
      load()
    })

    watch(
      () => editOn.value,
      () => {
        if (!editOn.value) {
          selElem.value = {}
        }
      })

    function selElemClick(myelem: IMyElem) {
      console.log('mypageelem selElemClick', myelem)
      selElem.value = {}
      selElem.value = myelem
      visuEditor.value = !!myelem
    }

    function mounted() {
      load()
    }

    function saveElem(myelem: IMyElem) {
      //
    }

    function changeVisuDrawer(path: string, edit: boolean) {
      globalStore.changeVisuDrawer(path, edit)
    }

    onMounted(mounted)

    return {
      rec, myelems,
      mypathin,
      editOn,
      visuEditor,
      addOn,
      tools,
      shared_consts,
      myelemVoid,
      selElemClick,
      selElem,
      saveElem,
      changeVisuDrawer,
    }
  },

})