<script setup lang="ts">
import LogoSVG from "public/sera-logo-no-text.svg";
import SiteInfo from "~/assets/siteinfo.json";
import type { DropDownEntry } from "~/utils/dropDown";

const { viewPortType } = useWindowDimensions();

const exploreDropDownEntries: Array<DropDownEntry> = [
    { text: "Home", link: "/" },
    { text: "Projects", link: "/projects" },
    { text: "CanSat", link: "/projects/cansat" },
    { text: "Rocket", link: "/projects/rocket" },
    { text: "Education", link: "/projects/education" },
    { text: "CubeSat KOSEN-X", link: "/projects/kosen-x" },
    { text: "About", link: "/about" },
];

const mediaDropDownEntries: Array<DropDownEntry> = [
    { text: "News", link: "/news" },
    { text: "Gallery", link: "/about/gallery" },
];

const hamburgerMenuEntries: Array<DropDownEntry> = [
    { text: "Home", link: "/" },
    { text: "News", link: "/news" },
    { text: "Projects", link: "/projects" },
    { text: "Rocket", link: "/projects/rocket" },
    { text: "CanSat", link: "/projects/cansat" },
    { text: "CubeSat KOSEN-X", link: "/projects/kosen-x" },
    { text: "教育プロジェクト", link: "/projects/education" },
    { text: `About ${SiteInfo.clubNameAbbreviation}`, link: "/about/sera" },
    { text: "活動実績", link: "/about/achievements" },
    { text: "写真集", link: "/about/gallery" },
    {
        text: "中学生・新入生向け",
        link: "/about/for-middle-schoolers-and-new-comers"
    },
];
</script>

<template>
    <header>
        <div class="navigation-menu">
            <div id="header-left">
                <DropDown
                    label="Explore"
                    :mode="DropDownMode.onClick"
                    :alignment="DropDownAlignment.Left"
                    :entries="exploreDropDownEntries"
                    class="left-dropdown"
                />
            </div>
            <div id="logo-link">
                <NuxtLink to="/">
                    <LogoSVG role="img" id="logo-img" />
                </NuxtLink>
            </div>
            <div id="header-right">
                <DropDown
                    label="Media"
                    :mode="DropDownMode.onClick"
                    :alignment="DropDownAlignment.Right"
                    :entries="mediaDropDownEntries"
                    class="right-dropdown"
                />
                <HamburgerMenu
                    :entries="hamburgerMenuEntries"
                    v-if="viewPortType === ViewPortType.MOBILE"
                />
            </div>
        </div>
    </header>
</template>

<style scoped>
header {
    width: 100vw;
    position: sticky;
    top: 0;
    z-index: 10;
}

.navigation-menu {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    line-height: 1.8;
    padding: 1.25rem 3rem;
    width: calc(100% - 6rem);
    height: 64px;
    background: var(--deep-space);
}

#header-left,
#header-right {
    display: flex;
}

#header-left {
    flex-direction: row;
}

#header-right {
    flex-direction: row-reverse;
    & ul {
        list-style: none;
        display: flex;
        justify-items: space-between;
    }
}

#logo-link {
    display: flex;
    justify-content: center;
    & a {
        width: fit-content;
        background: var(--moonlight);
        padding: 0.5rem;
        margin-top: -0.5rem;
        border-radius: 3rem;
        filter: drop-shadow(0 0 0.5rem var(--moonlight));
    }
    & a:hover {
        transform: scale(110%);
        transition: 0.2s ease-in;
    }
}

#logo-img {
    width: 128px;
    height: auto;
    background: transparent !important;
}

@media screen and (max-width: 640px) {
    .navigation-menu {
        padding-inline: 1rem;
        width: calc(100% - 2rem);
    }
    .left-dropdown,
    .right-dropdown {
        display: none;
    }
}
</style>
