---
import { ObjectId } from 'mongodb';
import { Image } from 'astro:assets';
import { checkForUnreadMails } from '../lib/db/mails';
import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/langDriver';

interface Props {
    loggedIn: string;
    active: string;
}

type ShowType = "loggedInOnly" | "notLoggedInOnly" | "always" | "never";

type Position = "top" | "bottom";

interface NavElement {
    id: string;
    title: string;
    type: "simple" | "dropdown";
    url: string;
    show: ShowType;
    position: Position;
    dropdowns?: Array<NavElement>;
}

const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));

const listOfElements: Array<NavElement> = [{
    id: "home",
    title: getName(lang, "general", "nav-home"),
    type: "simple",
    url: "/",
    show: "always",
    position: "top"
}, {
    id: "about",
    title: getName(lang, "general", "nav-about"),
    type: "simple",
    url: "#",
    show: "always",
    position: "top"
}, {
    id: "api",
    title: getName(lang, "general", "nav-api"),
    type: "simple",
    url: "#",
    show: "always",
    position: "top"
}, {
    id: "wiki",
    title: getName(lang, "general", "nav-wiki"),
    type: "simple",
    url: "/wiki",
    show: "always",
    position: "top"
}, {
    id: "login",
    title: getName(lang, "general", "nav-login"),
    type: "simple",
    url: "/login",
    show: "notLoggedInOnly",
    position: "bottom"
}, {
    id: "register",
    title: getName(lang, "general", "nav-register"),
    type: "simple",
    url: "/register",
    show: "notLoggedInOnly",
    position: "bottom"
}, {
    id: "overview",
    title: getName(lang, "general", "nav-overview"),
    type: "simple",
    url: "/game",
    show: "loggedInOnly",
    position: "bottom"
}, {
    id: "energy",
    title: getName(lang, "general", "nav-energy"),
    type: "simple",
    url: "/game/energy",
    show: "loggedInOnly",
    position: "bottom"
}, {
    id: "buildings",
    title: getName(lang, "general", "nav-buildings"),
    type: "simple",
    url: "/game/buildings",
    show: "loggedInOnly",
    position: "bottom"
}, {
    id: "research",
    title: getName(lang, "general", "nav-research"),
    type: "simple",
    url: "/game/research",
    show: "loggedInOnly",
    position: "bottom"
}, {
    id: "ships",
    title: getName(lang, "general", "nav-ships"),
    type: "simple",
    url: "/game/ships",
    show: "loggedInOnly",
    position: "bottom"
}, {
    id: "fleet",
    title: getName(lang, "general", "nav-fleet"),
    type: "simple",
    url: "/game/fleet",
    show: "loggedInOnly",
    position: "bottom"
},{
    id: "defenses",
    title: getName(lang, "general", "nav-defenses"),
    type: "simple",
    url: "/game/defenses",
    show: "loggedInOnly",
    position: "bottom"
}, {
    id: "galaxyView",
    title: getName(lang, "general", "nav-galaxy-view"),
    type: "simple",
    url: "/game/galaxyView",
    show: "loggedInOnly",
    position: "bottom"
}, {
    id: "systemManager",
    title: getName(lang, "general", "nav-system-manager"),
    type: "simple",
    url: "/game/systemManager",
    show: "loggedInOnly",
    position: "bottom"
}, {
    id: "profile",
    title: getName(lang, "general", "nav-profile"),
    type: "simple",
    url: "/game/profile",
    show: "loggedInOnly",
    position: "bottom"
}];

const { loggedIn, active } = Astro.props;

const filteredList = listOfElements.filter(element => 
    ((element.show === "always" || element.show === "loggedInOnly") && loggedIn === "true") ||
    ((element.show === "always" || element.show === "notLoggedInOnly") && loggedIn === "false")
);

const topRow = filteredList.filter(element => element.position === "top");
const bottomRow = filteredList.filter(element => element.position === "bottom");

const username = Astro.cookies.get('username')?.value ?? "";
const userId = Astro.cookies.get('userid')?.value ?? 0;

const hasUnreadMail = await checkForUnreadMails(new ObjectId(userId));
---
<nav>
    <div class="row">
        <ul>
            {topRow.map(element =>
                element.type === "dropdown" ?
                <div class="nav-item nav-item-dropdown">
                    <li><a href={element.url} class="nav-url">{element.title}</a></li>
                    <div class="nav-item-dropdown-div">
                        <ul>{element.dropdowns?.map(drop => <li class="nav-item-dropdown-content"><a href={drop.url} class={`nav-url ${active === drop.id ? "active" : ""}`}>{drop.title}</a></li><br />)}</ul>
                    </div>
                </div> : // else
                <li class="nav-item"><a href={element.url} class={`nav-url ${active === element.id ? "active" : ""}`}>{element.title}</a></li>
            )}
            <li class="nav-item"><span class="nav-username nav-keep-right">{username}</span></li>
            {loggedIn === "true" ? <li class="nav-item"><Image src="/gargamel.png" alt="profile-pic" width={179} height={178} class="avatar-icon" /></li> : ""}
            {loggedIn === "true" ? <li class="nav-item"><a href="/game/mail"><Image src={`/mail${hasUnreadMail ? "-notif" : ""}.svg?${new Date().getTime()}`} alt="mail" width={800} height={800} class="mail-icon" /></a></li> : ""}
        </ul>
    </div>
    <div class="row">
        <ul>
            {bottomRow.map(element =>
                element.type === "dropdown" ?
                <div class="nav-item nav-item-dropdown">
                    <li><a href={element.url} class="nav-url">{element.title}</a></li>
                    <div class="nav-item-dropdown-div">
                        <ul>{element.dropdowns?.map(drop => <li class="nav-item-dropdown-content"><a href={drop.url} class={`nav-url ${active === drop.id ? "active" : ""}`}>{drop.title}</a></li><br />)}</ul>
                    </div>
                </div> : // else
                <li class="nav-item"><a href={element.url} class={`nav-url ${element.id === "profile" ? "nav-keep-right" : ""} ${active === element.id ? "active" : ""}`}>{element.title}</a></li>
            )}
        </ul>
    </div>
</nav>
<style>
nav {
    background-color: rgb(56, 59, 99);
    border-radius: 10px;
}

nav ul {
    display: flex;
    flex-direction: row;
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 0;
}

.nav-item {
    list-style-type: none;
}

.nav-item:not(:first-child) {
    margin-left: 20px;
}

.nav-url {
    text-decoration: none;
    color: green;
}

.nav-url:hover {
    color: lime;
}

.nav-username {
    color: white;
}

.nav-keep-right {
    position: absolute;
    right: 140px;
}

.active {
    color: lime;
}

.avatar-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid white;
    position: absolute;
    right: 73px;
}

.mail-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /* border: 1px solid white; */
    position: absolute;
    right: 13px;
}
</style>