import { createRouter, createWebHistory } from 'vue-router'
import { mdiAccountGroupOutline, mdiAccountQuestion, mdiCodeTags, mdiHandCoin, mdiHome, mdiInformation } from '@mdi/js'
import About from '@/views/about/Index.vue'
import AboutPage from '@/views/about/About.vue'
import Acknowledgements from '@/views/about/Acknowledgements.vue'
import Wanderhome from '@/views/about/Wanderhome.vue'
import Home from '@/views/Home.vue'
import Quiz from '@/views/Quiz.vue'

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
        meta: {
            index: 0,
            svgPath: mdiHome,
            title: 'Home'
        }
    },
    {
        path: '/quiz',
        name: 'Quiz',
        component: Quiz,
        meta: {
            index: 1,
            svgPath: mdiAccountQuestion,
            title: 'Take the Quiz'
        }
    },
    {
        path: '/about',
        name: 'About',
        component: About,
        meta: {
            index: 2,
            svgPath: mdiInformation,
            title: 'About'
        },
        children: [
            {
                path: '',
                name: 'About',
                component: AboutPage,
                meta: {
                    index: 0,
                    parentIndex: 2,
                    svgPath: mdiInformation,
                    title: 'Background'
                }
            },
            {
                path: 'wanderhome',
                name: 'Wanderhome',
                component: Wanderhome,
                meta: {
                    index: 1,
                    parentIndex: 2,
                    svgPath: mdiHandCoin,
                    title: 'About Wanderhome'
                }
            },
            {
                path: 'acknowledgements',
                name: 'Acknowledgements',
                component: Acknowledgements,
                meta: {
                    index: 2,
                    parentIndex: 2,
                    svgPath: mdiAccountGroupOutline,
                    title: 'Acknowledgements'
                }
            },
            {
                path: 'https://git.vsnt.uk/viveksantayana/wanderhome-quiz',
                name: 'SourceCode',
                meta: {
                    index: 3,
                    parentIndex: 2,
                    svgPath: mdiCodeTags,
                    title: 'View Source Code'
                }
            }
        ]
    }
]

const Router = createRouter({
    history: createWebHistory(),
    routes
})

Router.beforeEach((to, from, next) => {
    if (to.meta.title != 'Home') {
        document.title = `Wanderhome Quiz | V.S. - ${to.meta.title}`
    } else {
        document.title = `Wanderhome Quiz | V.S.`
    }
    next()
})

Router.afterEach( (to, from) => {
    const enterActiveClass = 'transition-all duration-300 ease-in'
    const leaveActiveClass = 'transition-all duration-300 ease-out'
    const baseFromClass = 'transform opacity-0 md:scale-75'
    if ( to.fullPath.split('/')[1] !== from.fullPath.split('/')[1] || !from.matched.length ) {
        const fromIndex = from.meta.parentIndex ? from.meta.parentIndex : from.meta.index
        const toIndex = to.meta.parentIndex ? to.meta.parentIndex : to.meta.index
        const slideInDirection = toIndex < fromIndex ? 'md:-translate-x-1/3' : 'md:translate-x-1/3'
        const slideOutDirection = toIndex < fromIndex ? 'md:translate-x-1/3' : 'md:-translate-x-1/3'
        to.meta.mainEnterActiveClass = enterActiveClass
        to.meta.mainLeaveActiveClass = leaveActiveClass
        to.meta.mainEnterFromClass = baseFromClass + ' ' + slideInDirection
        to.meta.mainLeaveToClass = baseFromClass + ' ' + slideOutDirection
    } else if ( to.fullPath.split('/')[1] == from.fullPath.split('/')[1] && from.matched.length ) {
        const fromIndex = from.meta.index
        const toIndex = to.meta.index
        const slideInDirection = toIndex < fromIndex ? 'md:-translate-y-1/3' : 'md:translate-y-1/3'
        const slideOutDirection = toIndex < fromIndex ? 'md:translate-y-1/3' : 'md:-translate-y-1/3'
        to.meta.panelEnterActiveClass = enterActiveClass
        to.meta.panelLeaveActiveClass = leaveActiveClass
        to.meta.panelEnterFromClass = baseFromClass + ' ' + slideInDirection
        to.meta.panelLeaveToClass = baseFromClass + ' ' + slideOutDirection
    }
})

export default Router