import { createSSRApp, h } from 'vue';
import { createMemoryHistory, createRouter, RouterView } from 'vue-router';
import { createHead, renderHeadToString } from '@vueuse/head';
import { renderToString } from '@vue/server-renderer';
import { createI18n } from 'vue-i18n';
import { createPinia } from 'pinia';
import en from '@/locales/en.json';
import fr from '@/locales/fr.json';
import Landing from '@/static/views/Landing.vue';
import ProductPage from '@/static/views/ProductPage.vue';
import ProductFeaturePage from '@/static/views/ProductFeaturePage.vue';
import PricingPage from '@/static/views/PricingPage.vue';
import BlogsPage from '@/static/views/BlogsPage.vue';
import GuidesPage from '@/static/views/GuidesPage.vue';
import './assets/main.css';

const publicRoutes = [
    { path: '/', component: Landing },
    { path: '/product', component: ProductPage },
    { path: '/product/:featureSlug', component: ProductFeaturePage },
    { path: '/pricing', component: PricingPage },
    { path: '/blogs', component: BlogsPage },
    { path: '/guides', component: GuidesPage },
    { path: '/login', component: { render: () => null } },
    { path: '/register', component: { render: () => null } },
];

export async function render(routePath) {
    const router = createRouter({
        history: createMemoryHistory(),
        routes: publicRoutes,
    });

    const head = createHead();
    const i18n = createI18n({
        legacy: false,
        fallbackLocale: 'en',
        messages: {
            en,
            fr,
        },
    });

    const app = createSSRApp({
        render: () => h(RouterView),
    });

    app.use(createPinia());
    app.use(router);
    app.use(head);
    app.use(i18n);

    await router.push(routePath);
    await router.isReady();

    const appHtml = await renderToString(app);
    const headTags = await renderHeadToString(head);

    return {
        appHtml,
        headTags,
    };
}