<template>
    <MkStickyContainer>
        <template #header>
            <MkPageHeader :actions="headerActions" :tabs="headerTabs" />
        </template>
        <div style="overflow: clip">
            <MkSpacer :content-max="600" :margin-min="20">
                <div class="_formRoot znqjceqz">
                    <div id="debug"></div>
                    <div
                        ref="containerEl"
                        v-panel
                        class="_formBlock about"
                        :class="{ playing: easterEggEngine != null }"
                    >
                        <img
                            src="/client-assets/about-icon.png"
                            alt=""
                            class="icon"
                            draggable="false"
                            @load="iconLoaded"
                            @click="gravity"
                        />
                        <div class="misskey">Magnetar</div>
                        <div class="version">v{{ version }}</div>
                        <span
                            v-for="emoji in easterEggEmojis"
                            :key="emoji.id"
                            class="emoji"
                            :data-physics-x="emoji.left"
                            :data-physics-y="emoji.top"
                            :class="{
                                _physics_circle_: !emoji.emoji.startsWith(':'),
                            }"
                        >
                            <MagEmoji
                                class="emoji"
                                :emoji="emoji.emoji"
                                :custom-emojis="$instance.emojis"
                                :is-reaction="false"
                                :normal="true"
                                :no-style="true"
                            />
                        </span>
                    </div>
                    <div class="_formBlock" style="text-align: center">
                        {{ i18n.ts._aboutMisskey.about }}<br /><a
                            href="https://git.astolfo.cool/natty/magnetar"
                            target="_blank"
                            class="_link"
                            >{{ i18n.ts.learnMore }}</a
                        >
                    </div>
                    <FormSection>
                        <div class="_formLinks">
                            <FormLink
                                to="https://git.astolfo.cool/natty/magnetar"
                                external
                            >
                                <template #icon
                                    ><i class="ph-code ph-bold ph-lg"></i
                                ></template>
                                {{ i18n.ts._aboutMisskey.source }}
                                <template #suffix>
                                    git.astolfo.cool/natty/magnetar
                                </template>
                            </FormLink>
                            <!--
                            <FormLink
                                to="https://opencollective.com/calckey"
                                external
                            >
                                <template #icon
                                    ><i class="ph-money ph-bold ph-lg"></i
                                ></template>
                                {{ i18n.ts._aboutMisskey.donate }}
                                <template #suffix>Donate</template>
                            </FormLink>
                            <FormLink
                                to="https://hosted.weblate.org/engage/calckey/"
                                external
                            >
                                <template #icon
                                    ><i class="ph-translate ph-bold ph-lg"></i
                                ></template>
                                {{ i18n.ts._aboutMisskey.translation }}
                                <template #suffix>Translate</template>
                            </FormLink>
                            -->
                        </div>
                    </FormSection>
                    <FormSection>
                        <template #label
                            >{{ i18n.ts._aboutMisskey.contributors }}
                            (Magnetar)
                        </template>
                        <div class="_formLinks">
                            <FormLink to="/@natty@astolfo.social">
                                <Mfm
                                    :text="'@natty@astolfo.social (Main developer)'"
                                />
                            </FormLink>
                        </div>
                    </FormSection>
                    <FormSection>
                        <template #label
                            >{{ i18n.ts._aboutMisskey.contributors }}
                            (Calckey)
                        </template>
                        <div class="_formLinks">
                            <FormLink to="/@kainoa@calckey.social">
                                <Mfm
                                    :text="'$[sparkle @kainoa@calckey.social] (Main developer)'"
                                />
                            </FormLink>
                            <FormLink to="/@april@calckey.social">
                                <Mfm
                                    :text="'@april@calckey.social (Backend)'"
                                />
                            </FormLink>
                            <FormLink to="/@freeplay@calckey.social">
                                <Mfm
                                    :text="'@freeplay@calckey.social (UI/UX)'"
                                />
                            </FormLink>
                            <FormLink to="/@panos@calckey.social">
                                <Mfm
                                    :text="'@panos@calckey.social (Project Coordinator)'"
                                />
                            </FormLink>
                            <FormLink
                                to="https://www.youtube.com/c/Henkiwashere"
                                external
                                >Henki (error images artist)
                            </FormLink>
                        </div>
                        <template #caption>
                            <MkLink
                                url="https://codeberg.org/calckey/calckey/activity"
                                >{{
                                    i18n.ts._aboutMisskey.allContributors
                                }}</MkLink
                            >
                        </template>
                    </FormSection>
                </div>
            </MkSpacer>
        </div>
    </MkStickyContainer>
</template>

<script lang="ts" setup>
import { nextTick, onBeforeUnmount, ref, computed } from "vue";
import { version } from "@/config";
import FormLink from "@/components/form/link.vue";
import FormSection from "@/components/form/section.vue";
import MkLink from "@/components/MkLink.vue";
import { physics } from "@/scripts/physics";
import { i18n } from "@/i18n";
import { defaultStore } from "@/store";
import { definePageMetadata } from "@/scripts/page-metadata";

let easterEggReady = false;
let easterEggEmojis = ref([]);
let easterEggEngine = ref(null);
const containerEl = ref<HTMLElement>();

function iconLoaded() {
    const emojis = defaultStore.state.reactions;
    const containerWidth = containerEl.value?.offsetWidth;
    for (let i = 0; i < 32; i++) {
        easterEggEmojis.value.push({
            id: i.toString(),
            top: -(128 + Math.random() * 256),
            left: Math.random() * containerWidth,
            emoji: emojis[Math.floor(Math.random() * emojis.length)],
        });
    }

    nextTick(() => {
        easterEggReady = true;
    });
}

function gravity() {
    if (!easterEggReady) return;
    easterEggReady = false;
    easterEggEngine.value = physics(containerEl.value);
}

onBeforeUnmount(() => {
    if (easterEggEngine.value) {
        easterEggEngine.value.stop();
    }
});

const headerActions = computed(() => []);

const headerTabs = computed(() => []);

definePageMetadata({
    title: i18n.ts.aboutMisskey,
    icon: null,
});
</script>

<style lang="scss" scoped>
.znqjceqz {
    > .about {
        position: relative;
        text-align: center;
        padding: 16px;
        border-radius: var(--radius);

        &.playing {
            &,
            * {
                user-select: none;
            }

            * {
                will-change: transform;
            }

            > .emoji {
                visibility: visible;
            }
        }

        > .icon {
            display: block;
            width: 100px;
            margin: 0 auto;
            border-radius: 16px;
        }

        > .misskey {
            margin: 0.75em auto 0 auto;
            width: max-content;
        }

        > .version {
            margin: 0 auto;
            width: max-content;
            opacity: 0.5;
        }

        > .emoji {
            position: absolute;
            top: 0;
            left: 0;
            visibility: hidden;

            > .emoji {
                pointer-events: none;
                font-size: 24px;
                width: 24px;
            }
        }
    }
}
</style>
