<script lang="ts">
    import { darkMode, navigation, refresh, sites } from "../../stores"

    import { apiBaseURL } from "../../../config"
    import { navigate } from "svelte-routing"
    import { onMount } from "svelte"
    export let show = false
    function changeStateOfSite(menuOn: boolean) {
        let siteContainer = document.body
        show = menuOn
        if (menuOn) siteContainer.style.overflow = "hidden"
        else siteContainer.style.overflow = "initial"
    }

    async function changeSubmenu(e: EventTarget & HTMLLIElement, i: string | number) {
        changeStateOfSite(true)
        let submenu = document.getElementById("submenu-container")
        if (!submenu) return
        submenu.style.height = "calc(100vh - 120px)"
        submenu.classList.add("show-submenu")

        let elements = document.getElementsByClassName("innersubmenu-container")
        Array.from(elements).forEach((element) => {
            element.classList.remove("shown")
        })
        let shownMenu = document.getElementById("submenu-" + i)
        if (!shownMenu) return
        shownMenu.classList.add("shown")
    }

    let hoverTimeout: string | number | NodeJS.Timeout | undefined
</script>

<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<ul
    class="menu"
    on:mouseover="{(e) => {
        clearTimeout(hoverTimeout)
        hoverTimeout = setTimeout(() => {
            let element = document.getElementById('submenu-container')
            if (element) {
                element.style.height = '0vh'
                changeStateOfSite(false)
                element.classList.remove('show-submenu')
                let elements = document.getElementsByClassName('select-menu')
                Array.from(elements).forEach((e) => e.classList.remove('select-menu'))
            }
        }, 500)
    }}"
    on:mouseleave="{() => {
        clearTimeout(hoverTimeout)
    }}"
>
    <button
        class="logo-container"
        on:click="{() => {
            let element = document.getElementById('submenu-container')
            if (!element) return
            element.style.height = '0vh'
            element.classList.remove('show-submenu')
            changeStateOfSite(false)
            navigate('/')

            $refresh = !$refresh
        }}"
    >
        &nbsp;
        <div class="img-logo-container">
            <img src="/media/MädchenmitBlume.svg" alt="logo" />
        </div>
        <div class="logo-text" id="logo-containerpc">
            <div id="upperpc">all kids</div>
            <div id="lowerpc">SO GÜNSTIG WIE NACHHALTIG</div>
        </div>
        <div class="img-logo-container">
            <img src="/media/Radfahrer.svg" alt="logo" />
        </div>
    </button>
    <ul class="menuitem-container">
        {#if $navigation?.elemente}
            {#each $navigation.elemente as site, i (i)}
                <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
                <li
                    class="menu-item"
                    on:mousedown="{() => {
                        if (site.endpoint) {
                            let element = document.getElementById('submenu-container')
                            if (element) {
                                element.style.height = '0vh'
                                element.classList.remove('show-submenu')
                                changeStateOfSite(false)
                                navigate(`${$sites[site.seite || ''].path}`)
                                $refresh = !$refresh
                            }
                        }
                    }}"
                    on:mouseenter|stopPropagation="{(e) => {
                        clearTimeout(hoverTimeout)
                        if (!site.endpoint) {
                            let target = e.currentTarget
                            hoverTimeout = setTimeout(() => {
                                changeSubmenu(target, i)
                                let elements = document.getElementsByClassName('select-menu')
                                Array.from(elements).forEach((e) => e.classList.remove('select-menu'))
                                target.classList.add('select-menu')
                            }, 500)
                        } else {
                            hoverTimeout = setTimeout(() => {
                                let elements = document.getElementsByClassName('select-menu')
                                Array.from(elements).forEach((e) => e.classList.remove('select-menu'))
                                let element = document.getElementById('submenu-container')
                                if (element) {
                                    element.style.height = '0vh'
                                    element.classList.remove('show-submenu')
                                }
                                changeStateOfSite(false)
                            }, 500)
                        }
                    }}"
                    on:mouseleave|stopPropagation="{(e) => {
                        clearTimeout(hoverTimeout)
                    }}"
                >
                    {site.name}
                </li>
            {/each}
        {/if}
    </ul>
</ul>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
    class="submenu-container"
    id="submenu-container"
    on:mouseover="{(e) => {
        let element = e.currentTarget
        element.style.height = '0vh'
        changeStateOfSite(false)
        element.classList.remove('show-submenu')
    }}"
>
    {#if $navigation?.elemente}
        <div class="inner-container">
            {#each $navigation?.elemente as submenu, i (i * 10)}
                <!-- svelte-ignore a11y-click-events-have-key-events -->
                <!-- svelte-ignore a11y-no-static-element-interactions -->
                <!-- svelte-ignore a11y-no-static-element-interactions -->
                {#if !submenu?.endpoint}
                    <!-- svelte-ignore a11y-mouse-events-have-key-events -->
                    <!-- svelte-ignore a11y-click-events-have-key-events -->
                    <div
                        on:mouseover|stopPropagation
                        class="innersubmenu-container"
                        id="{`submenu-${i}`}"
                        on:click|stopPropagation
                    >
                        <div class="submenu-most-inner-container">
                            <div class="submenu-img">
                                <img
                                    src="{`${apiBaseURL}navigation/${$navigation?.id}/${submenu.image?.src}?filter=${
                                        typeof window !== 'undefined' && window?.innerWidth > 500 ? 'xl' : 'm'
                                    }`}"
                                    alt="img"
                                />
                            </div>
                            <ul class="sub-menu">
                                {#each submenu?.elemente || [] as submenu_point, i (i)}
                                    <li>
                                        <button
                                            class="submenu-item"
                                            on:click="{() => {
                                                let element = document.getElementById('submenu-container')
                                                if (!element) return
                                                element.style.height = '0vh'
                                                element.classList.remove('show-submenu')
                                                changeStateOfSite(false)
                                                navigate(`${$sites[submenu_point.seite || '']?.path}`)
                                                $refresh = !$refresh
                                            }}">{submenu_point?.name}</button
                                        >
                                    </li>
                                {/each}
                            </ul>
                        </div>
                    </div>
                {/if}
            {/each}
        </div>
    {/if}
</div>

<style lang="less" global>
    @import "../../assets/css/variables.less";
    @desktop: ~"only screen and (min-width: 1440px)";
    @media @desktop {
        nav {
            flex-grow: 3;
            .desktop-header {
                margin: 0px auto 0px auto;
                max-width: @body-maxwidth;
                width: 100%;
            }
            .menu {
                padding: 0px min(4.5vw, 100px);
                max-width: 1800px;
                width: 100%;
                display: flex;
                height: 120px;
                align-items: center;
                justify-content: space-between;
                .logo-container {
                    height: 60px;
                    display: flex;
                    align-items: center;
                    margin-top: -15px;

                    .logo-text {
                        padding: 0px 10px;
                        p {
                            white-space: nowrap;
                            text-align: left;
                        }
                        & > #upperpc {
                            font-family: "Dekko" !important;
                            font-size: 60px;
                            font-weight: 700;
                            word-spacing: 5px;
                            letter-spacing: 4px;
                            color: rgb(184, 16, 16);
                        }
                        & > #lowerpc {
                            font-size: 15px;
                            letter-spacing: 0.4px;
                            font-weight: bold;
                            margin-top: -17px;
                            color: orange;
                            font-family: "Grandstander" !important;
                        }
                        font-weight: bold;
                        font-size: 1.2rem;
                        padding-left: 10px;
                    }
                    .img-logo-container {
                        height: 100%;
                        position: relative;
                        top: 20px;
                        img {
                            height: 100%;
                            width: auto;
                            object-fit: contain;
                        }
                    }
                }
                div {
                }
                .menuitem-container {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    width: fit-content;
                    height: 100%;
                    max-width: 1400px;
                    margin-left: 15px;
                    .menu-item {
                        font-size: 24px;
                        border-radius: 60px;
                        padding: 3px 14px;
                        margin: 0px 2px;
                        height: fit-content;
                        display: flex;
                        align-items: center;
                        cursor: pointer;
                        &:hover {
                            background-color: var(--hover-color);
                        }
                    }
                    .select-menu {
                        background-color: var(--hover-color);
                    }
                }
            }
            .submenu-container {
                position: absolute;
                left: 0px;
                height: 0vh;
                overflow: hidden;
                width: 100vw;
                z-index: 2000;
                background-color: rgba(0, 0, 0, 0.849);
                opacity: 0;
                .inner-container {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    .innersubmenu-container {
                        width: 100%;
                        height: 60vh;
                        max-height: 700px;
                        opacity: 0;
                        position: absolute;
                        visibility: hidden;
                        background-color: var(--background-color);
                        display: flex;
                        justify-content: center;
                        .submenu-most-inner-container {
                            height: 100%;
                            width: 100%;
                            max-width: 1800px;
                            padding: 0px min(4.5vw, 100px);
                            display: flex;
                            justify-content: center;
                        }
                        .sub-menu {
                            display: flex;
                            max-width: calc(@body-maxwidth / 2 - min(3vw, 80px));
                            align-items: start;
                            padding-left: 20px;
                            flex-direction: column;
                            width: 50%;
                            li {
                                border-bottom: 1px solid #dee2e6;

                                width: 100%;
                                text-align: start;
                                &:hover {
                                    border-bottom: 1px solid var(--opposite-bg-color-80);
                                }
                                button {
                                    padding: 10px 0px;
                                    width: 100%;
                                    height: 100%;
                                    text-align: start;
                                }
                            }
                        }
                        .submenu-img {
                            max-width: calc(@body-maxwidth / 2 - min(3vw, 80px));
                            height: 100%;
                            width: 50%;
                            padding: 10px;
                            padding-right: 20px;

                            img {
                                height: 100%;
                                width: 100%;
                                object-fit: cover;
                            }
                        }
                    }
                    .shown {
                        opacity: 1;
                        visibility: visible;
                    }
                }
            }
            .show-submenu {
                height: 100vh;
                opacity: 1;
            }
        }
    }
</style>
