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`
body {
    height: 100svh;
}

.dj-blog-root {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    width: 800px;

    .dot {
        margin-left: 10px;
        margin-right: 10px;
    }

    .container {
        width: 100%;
    }

    footer {
        width: 800px;
        font-style: italic;
        margin-left: 10px;
        margin-bottom: 25px;
        text-align: left;
    }

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

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

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

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

    @media only screen and (max-width: 1024px) {
        width: 100%;

        .container {
            padding: 10px;
        }

        .dj-title {
            margin-right: 30px;
        }

        footer {
            margin-bottom: 0;
        }
    }
}
`;

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="dj-blog-root">
                    <nav>
                        <DjTooltip tooltip="flog, clog, bog, frog, cog, log, grog, fog, snog...">
                            <RouterLink to={{ name: 'DjBlogMain' }}>
                                dj blog
                            </RouterLink>
                        </DjTooltip>
                    </nav>
                    <div class="container">
                        <RouterView>
                            {{
                                default: ({ Component }: { Component: VNode }) => (Component &&
                                    (
                                        <Suspense>
                                            {{
                                                default: () => Component,
                                                fallback: () => <div>Page loading...</div>,
                                            }}
                                        </Suspense>
                                    )),
                            }}
                        </RouterView>
                    </div>
                    <hr />
                    <footer>
                        <div class="bottom">
                            <div>
                                <a href="/">djledda.net</a> {new Date().getFullYear()}<span class="dot">·</span><DjEmail>{() => "Contact"}</DjEmail><span class="dot">·</span><a href="/blog/djblog.rss">RSS Feed</a>
                            </div>
                        </div>
                    </footer>
                </div>
            </>
        );
    },
});