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`
.dj-blog-root {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;

    .container {
        width: 800px;
    }

    .spacer {
        flex: 1;
    }

    footer {
        color: gray;
        width: calc(100% - 10px);
        margin-bottom: 20px;
        font-style: italic;
        padding-left: 10px;
    }

    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);
        }
    }

    @media only screen and (max-width: 1024px) {
        .container {
            width: calc(100% - 20px);
            padding: 10px;
        }

        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">
                    <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>
                    </div>
                    <div class="spacer" />
                    <footer>
                        <div class="bottom">
                            <div>
                                <a href="/">djledda.net</a> {new Date().getFullYear()} - <DjEmail>{() => "Contact"}</DjEmail>
                            </div>
                        </div>
                    </footer>
                </div>
            </>
        );
    },
});