import { defineComponent, computed, ref, type Ref } from "vue";
import useHead from "@/useHead.ts";
import DjTooltip, { setupTooltip } from "@/DjTooltip.tsx";
import DjEmail from "@/DjEmail.tsx";

export default defineComponent({
    name: "app-root",
    setup() {
        useHead({ title: "DJ Ledda's Homepage" });

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

        const dude1Spinning = ref(false);
        const dude2Spinning = ref(false);

        function toggleDude(event: MouseEvent, dudeRef: Ref<boolean>) {
            const dude = event.target as HTMLImageElement;
            if (dudeRef.value) {
                dude.addEventListener("animationiteration", function listener() {
                    dudeRef.value = false;
                    dude.removeEventListener("animationiteration", listener as EventListenerOrEventListenerObject);
                });
            } else {
                dudeRef.value = true;
            }
        }

        const shaking = computed(() => dude1Spinning.value || dude2Spinning.value);

        return () => <>
            <div ref={tooltipCarrier} class="tooltip-carrier" />
            <div class="supercontainer">
                <div class={{ shakeable: true, shakeMe: shaking.value }}>
                    <div class="title_name">
                        <DjTooltip tooltip="I wonder what he's listening to?">
                            <img src="/home/img/dj.gif" alt="dj legt krasse Mucke auf" 
                                 class={{ dude: true, spinMe: dude1Spinning.value }} 
                                 onClick={ (e) => toggleDude(e, dude1Spinning)} />
                        </DjTooltip>
                        <DjTooltip tooltip="Easily the coolest guy out there.">
                            <span>DJ Ledda</span>
                        </DjTooltip>
                        <DjTooltip tooltip="I once heard this guy played at revs.">
                            <img src="/home/img/dj.gif" alt="dj laying down some sick beats" 
                                 class={{ dude: true, spinMe: dude2Spinning.value }} 
                                 onClick={ (e) => toggleDude(e, dude2Spinning) } />
                        </DjTooltip>
                    </div>
                    <div class="main">
                        <div class="subject">
                            <div class="resourcelist">
                                <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>
                                <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>
                                <a href="/generative-energy">
                                    <DjTooltip class="resource" tooltip="Thyroid calculator, German translations, and more...">
                                        Generative Energy - Ray Peat Resources
                                    </DjTooltip>
                                </a>
                                <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>
                                <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>
                                <a href="https://git.djledda.net/Ledda">
                                    <DjTooltip class="resource" tooltip="Check out what I'm coding!">
                                        My git projects
                                    </DjTooltip>
                                </a>
                                <DjEmail>
                                    <DjTooltip class="resource" tooltip="You'll see my address when you click here.">
                                        Click here to get in touch
                                    </DjTooltip>
                                </DjEmail>
                            </div>
                        </div>
                    </div>
                    <div id="tooltipCarrier"></div>
                </div>
            </div>
        </>;
    },
});