import { createRouter, createWebHistory } from 'vue-router'
import { mdiAccountBoxMultiple, mdiAccountGroupOutline, mdiAccountQuestion, mdiChartBox, mdiCodeTags, mdiCompare, mdiCounter, mdiForum, mdiHandCoin, mdiHome, mdiInformation, mdiLicense, mdiWeb } from '@mdi/js'
import About from '@/views/about/Index.vue'
import AboutPage from '@/views/about/About.vue'
import Licenses from '@/views/about/Licenses.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/Index.vue'
import QuizPage from '@/views/quiz/Quiz.vue'
import Question from '@/views/quiz/Question.vue'
import NotFound from '@/views/errors/NotFound.vue'
import Refused from '@/views/errors/Refused.vue'
import Results from '@/views/results/Index.vue'
import ResultsPage from '@/views/results/Results.vue'
import Scores from '@/views/results/Scores.vue'
import CompareAnswersIndex from '@/views/results/compare-answers/Index.vue'
import Statistics from '@/views/results/Statistics.vue'
import CompareResults from '@/views/results/CompareResults.vue'
import CompareQuestion from '@/views/results/compare-answers/CompareQuestion.vue'
import CompareQuestions from '@/views/results/compare-answers/CompareQuestions.vue'

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
        meta: {
            indexBase: 0,
            svgPath: mdiHome,
            title: 'Home'
        }
    },
    {
        path: '/quiz',
        name: 'Quiz',
        component: Quiz,
        meta: {
            indexBase: 1,
            svgPath: mdiAccountQuestion,
            title: 'Take the Quiz'
        },
        children: [
            {
                path: '',
                name: 'Quiz',
                component: QuizPage,
                meta: {
                    indexChild: 0,
                    indexBase: 1,
                    title: 'Take the Quiz'
                }
            },
            {
                path: 'question/:id',
                name: 'Question',
                component: Question,
                props: route => ({
                    id: parseInt(route.params.id)
                }),
                meta: {
                    indexChild: 1,
                    indexBase: 1,
                    title: 'Take the Quiz'
                }
            }
        ]
    },
    {
        path: '/about',
        name: 'About',
        component: About,
        meta: {
            indexBase: 2,
            svgPath: mdiInformation,
            title: 'About'
        },
        children: [
            {
                path: '',
                name: 'About',
                component: AboutPage,
                meta: {
                    indexChild: 0,
                    indexBase: 2,
                    svgPath: mdiInformation,
                    title: 'Background'
                }
            },
            {
                path: 'licenses',
                name: 'Licenses',
                component: Licenses,
                meta: {
                    indexChild: 1,
                    indexBase: 2,
                    svgPath: mdiLicense,
                    title: 'Licenses'
                }
            },
            {
                path: 'wanderhome',
                name: 'Wanderhome',
                component: Wanderhome,
                meta: {
                    indexChild: 2,
                    indexBase: 2,
                    svgPath: mdiHandCoin,
                    title: 'About Wanderhome'
                }
            },
            {
                path: 'acknowledgements',
                name: 'Acknowledgements',
                component: Acknowledgements,
                meta: {
                    indexChild: 3,
                    indexBase: 2,
                    svgPath: mdiAccountGroupOutline,
                    title: 'Acknowledgements'
                }
            },
            {
                path: 'https://git.vsnt.uk/viveksantayana/wanderhome-quiz',
                name: 'SourceCode',
                meta: {
                    indexChild: 4,
                    indexBase: 2,
                    svgPath: mdiCodeTags,
                    title: 'View Source Code'
                }
            }
        ]
    },
    {
        path: '/results',
        name: 'Results',
        component: Results,
        meta: {
            indexBase: -1,
            title: 'Results',
            svgPath: mdiAccountBoxMultiple
        },
        children: [
            {
                path: '',
                name: 'Result',
                component: ResultsPage,
                meta: {
                    indexChild: 0,
                    title: 'Your Results',
                    svgPath: mdiAccountBoxMultiple,
                    indexBase: -1
                }
            },
            {
                path: 'all',
                name: 'Scores',
                component: Scores,
                meta: {
                    indexChild: 1,
                    title: 'Your Scores',
                    svgPath: mdiCounter,
                    indexBase: -1
                }
            },
            {
                path: 'compare',
                name: 'CompareResults',
                component: CompareResults,
                meta: {
                    indexChild: 2,
                    title: 'Compare Results',
                    svgPath: mdiCompare,
                    indexBase: -1
                }
            },
            {
                path: 'statistics',
                name: 'Statistics',
                component: Statistics,
                meta: {
                    indexChild: 3,
                    title: 'Statistics',
                    svgPath: mdiChartBox,
                    indexBase: -1
                }
            },
            {
                path: 'answers',
                name: 'Answers',
                component: CompareAnswersIndex,
                meta: {
                    indexChild: 4,
                    title: 'Compare Answers',
                    svgPath: mdiForum,
                    indexBase: -1
                },
                children: [
                    {
                        path: '',
                        name: 'RootAnswer',
                        component: CompareQuestions,
                        meta: {
                            indexGrandchild: 0,
                            title: 'Compare Answers',
                            svgPath: mdiForum,
                            indexBase: -1,
                            indexChild: 4
                        }
                    },
                    {
                        path: ':id',
                        name: 'CompareQuestion',
                        component: CompareQuestion,
                        props: route => ({
                            id: parseInt(route.params.id)
                        }),
                        meta: {
                            indexGrandchild: 1,
                            title: 'Compare Answers',
                            svgPath: mdiForum,
                            indexBase: -1,
                            indexChild: 4
                        }
                    }
                ]
            }
        ]
    },
    {
        path: '/err_notfound',
        name: 'NotFound',
        component: NotFound,
        meta: {
            indexBase: -2,
            title: 'Error: Not Found',
            svgPath: mdiWeb
        }
    },
    {
        path: "/:catchAll(.*)",
        name: 'CatchAll',
        redirect: '/err_notfound',
        meta: {
            indexBase: -3,
            title: 'Error: Not Found',
            svgPath: mdiWeb
        }
    },
    {
        path: "/err_refused",
        name: 'Refused',
        component: Refused,
        meta: {
            indexBase: -4,
            title: 'Error: Connection Refused',
            svgPath: mdiWeb
        }
    }
]

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

Router.beforeEach((to, from) => {
    if (to.meta.title != 'Home') {
        document.title = `Wanderhome Quiz | V.S. - ${to.meta.title}`
    } else {
        document.title = `Wanderhome Quiz | V.S.`
    }
    if (from.meta.indexBase == -1 && to.meta.indexBase != -1) {
        if (!confirm('If you navigate away from the Results section, then you will lose your results and need to start the quiz again. Are you sure?')) {
            return false
        }
        to.meta.resetApp = true
    }
})

Router.afterEach( (to, from) => {
    const enterActiveClass = 'transition-all duration-300 origin-top ease-in'
    const leaveActiveClass = 'transition-all duration-300 origin-top ease-out'
    const baseFromClass = 'transform opacity-0 md:scale-75'
    if ( from.meta.indexBase !== to.meta.indexBase ) {
        const fromIndex = from.meta.indexBase
        const toIndex = to.meta.indexBase
        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 ( from.meta.indexChild !== to.meta.indexChild ) {
        const fromIndex = from.meta.indexChild
        const toIndex = to.meta.indexChild
        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