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 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() {
      const mymenu = globalStore.getmenu
      Object.keys(mymenu).forEach((parentName: any) => {
        // @ts-ignore
        setParentVisibilityBasedOnRoute(mymenu[parentName])
      })
      myroutes.value = []
      myroutes.value = static_data.routes
    }

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

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

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