import type { IListRoutes } from '@src/model';
import { useGlobalStore } from '@store/globalStore';
import { tools } from '@tools';
import { computed, defineComponent, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { static_data } from '@src/db/static_data';
import { useUserStore } from '@store/UserStore';

import { CMenuItem } from '../../components/CMenuItem';

export default defineComponent({
  name: 'MenuOne',

  components: { CMenuItem },
  setup(props) {
    const route = useRoute();
    const userStore = useUserStore();
    const globalStore = useGlobalStore();

    const finishLoading = computed(() => globalStore.finishLoading);
    const updateMenu = computed(() => globalStore.updateMenu);

    const path = computed(() => route.path);

    const getroutes = computed(() => static_data.routes);

    const myroutes = ref(<IListRoutes[]>[]);

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

    const islogged = computed(() => userStore.isLogged);

    const clBase = ref('my-menu');

    function setParentVisibilityBasedOnRoute(parent: any) {
      parent.routes.forEach((item: any) => {
        if (path.value === item.path) {
          parent.show = true;
        }
      });
    }

    function updatemenu() {
      console.log('*** updatemenu');
      const mymenu = globalStore.getmenu;
      Object.keys(mymenu).forEach((parentName: any) => {
        // @ts-ignore
        setParentVisibilityBasedOnRoute(mymenu[parentName]);
      });
      myroutes.value = [];
      myroutes.value = static_data.routes;

      globalStore.updateMenu = false;
    }

    watch(
      () => islogged.value,
      (to, from) => {
        updatemenu();
      }
    );

    watch(
      () => finishLoading.value,
      (to, from) => {
        updatemenu();
      }
    );

    watch(
      () => updateMenu.value,
      (newValue, oldValue) => {
        if (newValue) updatemenu();
      },
      { deep: true }
    );

    watch(
      () => path,
      (to, from) => {
        updatemenu();
      }
    );

    /* function replaceUnderlineToSpace(text: string) {
      while (text.indexOf('_') !== -1) {
        text = text.replace('_', ' ')
      }
      return text
    } */

    function getroute(elem: IListRoutes) {
      let link = '';
      if (elem.idelem) {
        link = tools.getUrlByTipoProj(elem.urlroute ? elem.urlroute : '') + elem.idelem;
      }
      if (!link) link = elem.path;

      // console.log('getroute LINK=', link)
      return link;
    }

    function getmymenuclass(elem: IListRoutes) {
      let menu: string = clBase.value;

      if (elem.color) {
        menu += ` ${elem.color}`;
      } else {
        if (elem.onlyAdmin) menu += ' isAdmin';
        if (elem.onlyManager) menu += ' isManager';
        if (elem.onlySocioResidente) menu += ' isSocioResidente';
        if (elem.onlyConsiglio) menu += ' isConsiglio';
        if (elem.onlyDepartment) menu += ' isDepartment';
        if (elem.onlyFacilitatore) menu += ' isFacilitatore';
        if (elem.onlyEditor) menu += ' isEditor';
        if (elem.onlyCommerciale) menu += ' isCommerciale';
        if (elem.onlyCollaboratore) menu += ' isCollaboratore';
        if (elem.onlyGrafico) menu += ' isGrafico';
      }

      if (elem.extraclass) menu += ` ${elem.extraclass}`;

      // console.log('menu', menu)
      return menu;
    }

    function getimgiconclass(elem: IListRoutes) {
      if (elem.extraclass) return elem.extraclass;
      else return 'imgicon';
    }
    function getimgiconclass2(elem: IListRoutes) {
      if (elem.extraclass) return elem.extraclass;
      else return 'clBase';
    }

    function getmenuByPath(path: string) {
      const mymenufind = static_data.routes.find((menu: any) => menu.path === '/' + path);

      return mymenufind;
    }

    myroutes.value = static_data.routes;

    return {
      getmenu,
      finishLoading,
      getmymenuclass,
      getroute,
      static_data,
      tools,
      getroutes,
      myroutes,
      getimgiconclass,
      getimgiconclass2,
      getmenuByPath,
      clBase,
    };
  },
});