import { createRouter, createWebHistory } from "vue-router";

const routes = [ {
    name: "Simulator FM",
    mode: "history",
    linkActiveClass: "border-transparent",
    routes: [
        {
            path: "/home",
            name: "Home",
            component: () => import("./components/Home.vue"),
        },
        {
            path: "/request",
            name: "Request",
            component: () => import("./components/Request.vue"),
        },
        {
            path: "/timetable",
            name: "Timetable",
            component: () => import("./components/Timetable.vue"),
        },
        {
            path: "/team",
            name: "Team",
            component: () => import("./components/Team.vue"),
        },
        {
            path: "/contact-us",
            name: "Contact Us",
            component: () => import("./components/Contact.vue"),
        },
        {
            path: "/apply",
            name: "Apply",
            component: () => import("./components/Apply.vue"),
        },
        {
            path: "/streamer",
            name: "Streamer",
            component: () => import("./components/Streamer.vue"),
        },
        {
            path: "/post/:slug",
            name: "Post",
            component: () => import("./components/Post.vue"),
        },
        {
            path: "/song",
            name: "Song",
            component: () => import("./components/Song.vue"),
        },
    ],
    components: {
        "player": () => import("./components/Player.vue").default,
    },
}];

const router = createRouter({
    history: createWebHistory(),
    routes,
    linkActiveClass: "active",
});

router.afterEach((to, from) => {
    if (to.meta != null && to.meta.title != null)
        document.title = to.meta.title;

    Array.from(document.querySelectorAll('[data-vue-meta]')).map(el => el.parentNode.removeChild(el));

    if (to.meta && to.meta.metaTags) {
        to.meta.metaTags.map(tagDef => {
            let tag = document.createElement('meta');

            Object.keys(tagDef).forEach(key => tag.setAttribute(key, tagDef[key]));

            tag.setAttribute('data-vue-meta', '');

            return tag;
        }).forEach(tag => document.head.appendChild(tag));
    }
});

export default router