import { defineComponent, ref, type VNode, Suspense } from "vue";
import { type RouteRecordRaw, RouterLink, RouterView } from "vue-router";
import DjTooltip, { setupTooltip } from "@/DjTooltip.tsx";
import DjBlogEntry from "@/blog/DjBlogEntry.tsx";
import DjBlogMain from "@/blog/DjBlogMain.tsx";
import DjEmail from "@/DjEmail.tsx";
import { addCSS, css } from "@/util.ts";
import useHead from "@/useHead.ts";

export const routes: RouteRecordRaw[] = [
    {
        path: "/",
        name: "DjBlogMain",
        component: DjBlogMain,
    },
    {
        path: "/post/:slug",
        name: "DjBlogEntry",
        component: DjBlogEntry,
        props: ({ params }) => {
            if ("slug" in params) {
                return { slug: params.slug };
            } else {
                return false;
            }
        },
    },
];

const styles = css`
.supercontainer {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 100px;
}

.container {
    width: 800px;
}

footer {
    color: gray;
    font-style: italic;
    margin-top: 40px;
}

a {
    color: var(--dj-palette3);
    text-decoration: solid line;

    &:visited {
        color: var(--dj-visited);
    }
}

nav {
    font-size: 40px;
    margin-bottom: 40px;
    text-decoration: none;
    text-align: right;
    width: 100%;

    a, a:visited {
        color: var(--dj-palette3);
    }
}
`;

export default defineComponent({
    name: "DjBlogRoot",
    setup() {
        const carrier = ref<HTMLDivElement | null>(null);
        setupTooltip({ carrier });

        addCSS('dj-blog-root', styles);
        useHead({ title: "djblog Home" });

        return () => (
            <>
                <div ref={carrier} class="tooltip-carrier" />
                <div class="supercontainer">
                    <div class="container">
                        <nav>
                            <DjTooltip tooltip="flog, clog, bog, frog, cog, log, grog, fog, snog...">
                                <RouterLink to={{ name: 'DjBlogMain' }}>
                                    dj blog
                                </RouterLink>
                            </DjTooltip>
                        </nav>
                        <RouterView>
                            {{
                                default: ({ Component }: { Component: VNode }) => (Component &&
                                    (
                                        <Suspense>
                                            {{
                                                default: () => Component,
                                                fallback: () => <div>Page loading...</div>,
                                            }}
                                        </Suspense>
                                    )),
                            }}
                        </RouterView>
                        <footer>
                            <div class="bottom">
                                <div>
                                    <a href="/">djledda.net</a> {new Date().getFullYear()} - <DjEmail>{() => "Contact"}</DjEmail>
                                </div>
                            </div>
                        </footer>
                    </div>
                </div>
            </>
        );
    },
});
