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

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

import { CImgTitle } from '../CImgTitle/index';
import { CTitle } from '../CTitle/index';
import { tools } from '@tools';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { shared_consts } from '@src/common/shared_vuejs';
import objectId from '@src/js/objectId';
import { useRouter, useRoute } from 'vue-router';

export default defineComponent({
  name: 'CMyPageElem',
  components: {
    LandingFooter,
    CImgTitle,
    CTitle,
    CMyElem,
    CMyEditElem,
    CMyPageElem2,
    CTitleBanner,
    CExportImportPage,
  },
  props: {
    title: String,
    mypath: {
      type: String,
      required: true,
    },
    idPage: {
      type: String,
      required: false,
      default: '',
    },
    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 myidPage = toRef(props, 'idPage');

    const $q = useQuasar();

    const { t } = useI18n();
    const globalStore = useGlobalStore();
    const $router = useRouter();
    const $route = useRoute();

    const mywidthEditor = ref(400);

    const showexportPage = ref(false);
    const showimportPage = ref(false);

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

      set(value: boolean) {
        return tools.updateEditOn(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(<IMyElem | null>globalStore.selElem);
    const site = ref(globalStore.site);

    const onloading = ref(false);

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

    const hideHeader = computed(() => {
      return rec.value?.hideHeader || $route.query?.hideHeader;
    });
    const instampa = computed(() => {
      return $route.query?.stampa === '1';
    });

    async function load() {
      console.log('load', mypathin.value, 'idapp', tools.getEnv('VITE_APP_ID'));

      const query = $router.currentRoute.value.query

      if (query.edit === '1') {
        globalStore.editOn = true;
      }

      if (mypathin.value !== '') {
        onloading.value = true;
        await globalStore.loadPage('/' + mypathin.value, 'cmypageelem').then((ris) => {
          rec.value = ris;
          if (ris && hideHeader.value) {
            globalStore.setshowHeader(false);
          }
          if (ris && instampa.value) {
            globalStore.setinStampa(true);
          }

          // console.log('LoadPage', ris)
        });
        onloading.value = false;
      }

      if (
        mypathin.value === 'home_logout' &&
        globalStore.site.name === 'local' &&
        !rec.value
      ) {
        $router.replace('/install_site');
      }

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

    async function mounted() {
      await load();
    }

    function saveElem(myelem: IMyElem) {
      //
    }

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

    function toggleSize() {
      mywidthEditor.value = mywidthEditor.value === 400 ? 1050 : 400;
    }

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

      try {
        selElem.value = {};
        selElem.value = myelem;
        visuEditor.value = !!myelem;
      } catch (error) {
        console.log(error);
      }
    }

    async function duplicatePage() {
      await globalStore.duplicatePage(mypathin.value, $q, t);
    }

    onMounted(mounted);

    return {
      rec,
      myelems,
      mypathin,
      editOn,
      visuEditor,
      addOn,
      tools,
      shared_consts,
      myelemVoid,
      selElemClick,
      selElem,
      saveElem,
      changeVisuDrawer,
      mywidthEditor,
      toggleSize,
      onloading,
      deleteElem,
      duplicatePage,
      showexportPage,
      showimportPage,
      hideHeader,
      myidPage,
    };
  },
});