import { defineComponent, ref } from "vue";
import useHead from "@/useHead.ts";
import DjTooltip, { setupTooltip } from "@/DjTooltip.tsx";
import DjEmail from "@/DjEmail.tsx";
import { addCSS, css } from "@/util.ts";

const styles = css`
body {
    height: 100svh;
}

.dj-home-root {
    margin: auto;
    width: 500px;
    display: flex;
    flex-direction: column;
    height: 100%;

    .resource {
        margin-bottom: 10px;
    }

    .spacer {
        flex-grow: 1;
        height: 100%;
    }

    .dj-title {
        font-size: 48px;
        margin: 20px auto;
        color: var(--dj-palette3);
        text-align: right;
        white-space: nowrap;
        display: flex;
        flex-direction: row;
        flex-flow: row-reverse;
        overflow: hidden;
    }

    .underline {
        text-decoration: underline solid var(--dj-palette3);
    }

    .pad {
        color: var(--dj-bgpalette1);
    }

    .main {
        margin: 20px auto;
        text-align: left;
    }

    li {
        list-style: disclosure-closed;
    }

    a {
        color: var(--dj-palette3);

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

    footer {
        margin-left: 10px;
        margin-bottom: 20px;
        font-style: italic;
    }

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

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

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

export default defineComponent({
    name: "DjHomeRoot",
    setup() {
        addCSS('DjHomeRoot', styles);
        useHead({ title: "djledda" });

        const tooltipCarrier = ref<HTMLDivElement | null>(null);
        setupTooltip({ carrier: tooltipCarrier });

        return () => <>
            <div ref={tooltipCarrier} class="tooltip-carrier" />
            <div class="dj-home-root">
                <div>
                    <div class="dj-title">
                        <DjTooltip tooltip="Easily the coolest guy out there.">
                            <div class="underline">
                                <span class="pad">_ _ _ _ _ _ _ __</span><span>dj ledda</span>
                            </div>
                        </DjTooltip>
                    </div>
                    <main class="main">
                        <ul class="resourcelist">
                            <li>
                                <a href="/blog">
                                    <DjTooltip class="resource" tooltip="My musings, my losings, my winnings, my thoughts">
                                        Blog
                                    </DjTooltip>
                                </a>
                            </li>
                            <li>
                                <a href="/generative-energy">
                                    <DjTooltip class="resource" tooltip="Thyroid calculator, German translations, and more...">
                                        Generative Energy - Ray Peat Resources
                                    </DjTooltip>
                                </a>
                            </li>
                            <li>
                                <a href="https://git.djledda.net/Ledda">
                                    <DjTooltip class="resource" tooltip="Check out what I'm coding!">
                                        My git projects
                                    </DjTooltip>
                                </a>
                            </li>
                            <li>
                                <a href="/home/muenchen-auf-englisch.html">
                                    <DjTooltip class="resource" tooltip="
                                        Authentic historically accurate translations of all of Munich's S-Bahn and U-Bahn
                                        stations, as well as the main municipalities, into English. You live in Allach? It's
                                        Axleigh now. Giesing? Nope! Kyesing! This is a WIP.
                                    ">
                                        M&uuml;nchen auf Englisch - Munich in English
                                    </DjTooltip>
                                </a>
                            </li>
                            <li>
                                <a href="https://drum-slayer.com">
                                    <DjTooltip class="resource" tooltip="Small app for designing multitrack looped rhythms with local save and multiple files. Originally built using just vanilla TypeScript and CSS, now with Vue.">
                                        Drum Slayer
                                    </DjTooltip>
                                </a>
                            </li>
                            <li>
                                <a href="/somaesque/index.html">
                                    <DjTooltip class="resource" tooltip="Puzzle solver app for puzzle cubes resembling the original Soma Cube puzzle. Save and edit your own puzzles! Built with Svelte, THREE.js and AssemblyScript.">
                                        Somaesque
                                    </DjTooltip>
                                </a>
                            </li>
                            <li>
                                <a href="/kadi/">
                                    <DjTooltip class="resource" tooltip="Make an account and start saving paper and tracking your Yatzy stats with your
                                        friends! Make your own rulesets, and more. Built with React, express.js, and
                                        MongoDB. Currently inactive.">
                                        K A D I: Online Yatzy Scoresheets
                                    </DjTooltip>
                                </a>
                            </li>
                        </ul>
                    </main>
                </div>
                <div class="spacer" />
                <footer>
                    <div class="bottom">
                        <div>
                            <a href="/">djledda.net</a> {new Date().getFullYear()} - <DjEmail>{() => "Contact"}</DjEmail>
                        </div>
                    </div>
                </footer>
            </div>
        </>;
    },
});