---
import { getHighestWeightedLanguage, getLocales } from '../lib/lang/langDriver';
interface Props {
    loggedIn: string;
}

interface NavElement {
    title: string;
    type: "simple" | "dropdown";
    url: string;
    dropdowns?: Array<NavElement>;
}

const lang = await getLocales(getHighestWeightedLanguage(Astro.request.headers.get('accept-language')), 'navbar');

const listOfElements: Array<NavElement> = [{
    title: lang["Link_home"],
    type: "simple",
    url: "/"
}, {
    title: lang["Link_login"],
    type: "simple",
    url: "/login"
}, {
    title: lang["Link_register"],
    type: "simple",
    url: "/register"
},{
    title: lang["Link_dropdown"],
    type: "dropdown",
    url: "about:blank",
    dropdowns: [{
        title: "drop1",
        type: "simple",
        url: "aaa"
    }, {
        title: "drop2",
        type: "simple",
        url: "aaa"
    }, {
        title: "drop3",
        type: "simple",
        url: "aaa"
    }]
}];

const { loggedIn } = Astro.props;
---

<nav>
    <ul>
        {listOfElements.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">{drop.title}</a></li><br />)}</ul>
                </div>
            </div> : // else
            <li class="nav-item"><a href={element.url} class="nav-url">{element.title}</a></li>
        )}
    </ul>
</nav>

<style>
nav {
    color: yellow;
    background-color: gray;
    border-radius: 15px;
}

nav ul {
    list-style: none;
    display: flex;
    padding-left: 15px;
}

.nav-item {
    flex-direction: row;
    font-size: xx-large;
}

.nav-item:not(:first-child) {
    margin-left: 50px;
    /* color: green; */
}

.nav-item-dropdown {
    color: red;
    font-size: xx-large;
    position: relative;
    display: inline-block;
}

.nav-item-dropdown-div {
    display: none;
    position: absolute;
    background-color: green;
}

.nav-item-dropdown-div ul {
    display: flex;
    flex-direction: column;
}

.nav-item-dropdown:hover .nav-item-dropdown-div {
    display: inline-block;
    /* position: relative; */
    /* padding-top: 100px; */
}

.nav-item-dropdown:hover .nav-item-dropdown-content {
    z-index: 1;
    padding-top: 5px;
}

.nav-url {
    text-decoration: none;
    color: inherit;
}
</style>