import { defineComponent, ref, Suspense, type VNode } from "vue";
import { type RouteRecordRaw, RouterLink, RouterView, useRoute } from "vue-router";
import GEMain from "@/generative-energy/GEMain.tsx";
import DJEmail from "@/DJEmail.tsx";
import GEDeutsch from "@/generative-energy/GEDeutsch.tsx";
import GEDeutschArticle from "@/generative-energy/GEDeutschArticle.tsx";
import GECalculator from "@/generative-energy/GECalculator.tsx";
import DJDonate from "@/DJDonate.tsx";
import { setupTooltip } from "@/DJTooltip.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();
        const carrier = ref<HTMLDivElement | null>(null);
        setupTooltip({ carrier });
        return () => (
            <>
                <div ref={carrier} class="tooltip-carrier" />
                <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="/">djledda.de</a> 2024 - <DJEmail>{() => "Contact"}</DJEmail>
                            </div>
                            <DJDonate />
                        </div>
                    </footer>
                </main>
            </>
        );
    },
});