let pages = []
let routes = []
let removedRoutes = []

function expandLink(link) {
    let expand = (x) => {
        return { 
            ...app.$route?.params
        }[x]
    }
    return link.replace(/\:(\w)*\//ig, match => expand(match.slice(1, -1)) + '/')
               .replace(/\:(\w)*$/ig,  match => expand(match.slice(1    )))
}
function goto(page, reload, target) {
    //expand route params from current route
    page = expandLink(page)
    let targetList = ["_blank", "_parent", "_self", "_top"]
    if(target && targetList.includes(target)) {
        let routeData = app.$router.resolve(page)
        window.open(routeData.href, target)
    }
    else if (app.$route.name != page && app.$route.path != page) {
        app.$router.push(page)
    } else if (reload) {
        app.$router.go()
    }
}
async function loadPage(id) {
    let items = await tkget('load/' + id)
    if (items.page) {
        data.page = items.page
    }
    

	data.visibility = {}
	data.items = items
    data.pagedata = items 
}
function newRoute(p) {
    p.name = p.id
    return {
        path: p.url || '/', 
        name: p.id || '/', 
        meta: p.meta || {},
        component: Vue.component('x-page'),

        beforeEnter: async (to, from, next) => {
            console.log("before-enter page", p.id)
            try {
                data.pagedata = null
                await loadPage(p.id)
            } catch (ex) {
                console.error(p.id, "error", ex)
            }
            data.pageLoading = true

            

            data.menuOpenIDS.length = 0
            autoOpenMenuParents(data.menu, to.matched?.[0].path)
            
            next()
        },
        props: () => {
            if (data.pageObject === p && data.page) {
                return data.pageProps
            }
            return {
                root: data.pagedata,
            }
        }
    }
}
async function reloadPages() {
    let newPages = await tkget('pages')

    newPages = newPages.sort((a, b) => a.id<b.id ? -1 : 1)

    newPages.forEach(p => {
        let match = pages.find(x => x.id == p.id)
        if (!match) {
            //new page
            let route = newRoute(p)
            
            if (app && app.$router) {
                app.$router.addRoute(route)
            } else {
                routes.push(route)
            }
        }
    })
    pages.forEach(p => {
        let match = newPages.find(x => x.id == p.id)
        if (!match) {
            removedRoutes.push(p)
        }
    })
    pages = newPages
    data.pages = pages
    //console.log("reload pages", routes, newPages, pages)
    rebuildMenuFromPages()
}
async function createRouter() {
    //console.log("create router", routes)
    router = new VueRouter({ routes })

    router.beforeEach(async (to, from, next) => {
        let token = getToken()
        let match = pages.find(x => x.name == to.name)
        
        console.log("routing", from, to, token, match)

        if (removedRoutes.find(x => x.name == to.name))
            return
        if (to.name == 'logout') {
            //nop?
        }
        if (!token && to.name != 'login') {
            return next({ name: 'login' })
        }
        if (!match && to.path == '/' && pages.find(x => x.name == 'homepage')) {
            return next({ name: 'homepage' })
        }
        return next()
    })
    return router
}