import { defineComponent, type VNode, Suspense } from "vue";
import { useRoute, RouterLink, RouterView, type RouteRecordRaw } from 'vue-router';
import GEMain from "@/generative-energy/GEMain.tsx";
import DJEmail from "@/DJEmail.tsx";
import GEPaypal from "@/generative-energy/GEPaypal.tsx";
import GEDeutsch from "@/generative-energy/GEDeutsch.tsx";
import GEDeutschArticle from "@/generative-energy/GEDeutschArticle.tsx";
import GECalculator from "@/generative-energy/GECalculator.tsx";

export const routes: RouteRecordRaw[] = [
    {
        path: '/',
        name: 'GEMain',
        component: GEMain,
    },
    {
        path: '/calculator',
        name: 'GECalculator',
        component: GECalculator,
    },
    {
        path: '/raypeat-deutsch',
        name: 'GEDeutsch',
        component: GEDeutsch,
    },
    {
        path: '/raypeat-deutsch/article/:articleName',
        name: 'GEDeutschArticle',
        component: GEDeutschArticle,
        props: ({ params }) => {
            if ('articleName' in params) {
                return { articleName: params.articleName };
            } else {
                return false;
            }
        },
    },
];

export default defineComponent({
    name: "ge-root",
    setup() {
        const route = useRoute();
        return () => <>
            <main>
                <RouterLink class={"home-btn" + (route.name === 'GEMain' ? ' hide' : '') } 
                            to={{ name: 'GEMain' }}>
                    Generative Energy Home
                </RouterLink>
                <RouterView>{{ default: ({ Component }: { Component: VNode }) => (Component && 
                    <Suspense>{{
                      default: () => Component,
                      fallback: () => <div>Page loading...</div>,
                    }}</Suspense>
                )}}</RouterView>
                <footer>
                    <div class="bottom">
                        <div>
                            <a href="https://djledda.de/">djledda.de</a> 2023 - <DJEmail>{ () => 'Contact' }</DJEmail>
                        </div>
                        <GEPaypal />
                    </div>
                </footer>
            </main>
        </>;
    },
});