<script lang="ts">
    import { navigateWrapper } from "../functions/utils"
    import { content, navigation } from "../store"

    let opened = -1
    let openMenu = false
    $: {
        if (openMenu) document.body.style.overflow = "hidden"
        else document.body.style.overflow = "auto"
    }
</script>

<header class="header">
    <div class="container">
        <button class="logo" on:keydown on:click="{() => navigateWrapper('/')}">
            <img src="/media/logoquer.png" alt="Logo Quer" />
        </button>
        <nav class="navigation">
            {#each $navigation as nav, i}
                <!-- svelte-ignore a11y-click-events-have-key-events -->
                <ul class="nav-element">
                    <li>
                        <button
                            class="nav-title"
                            on:click="{(e) => {
                                if (nav.page) navigateWrapper($content?.[nav.page]?.path)
                            }}"
                        >
                            <a href="{$content?.[nav?.page || '']?.path}" on:click|preventDefault> {nav.name}</a>
                        </button>
                    </li>
                    {#if !nav?.endpoint}
                        <ul class="subNav" style="{$navigation.length - 1 == i ? 'right: 0px;' : ''}'}">
                            {#each nav.elements || [] as subNav}
                                <li>
                                    <button
                                        class="nav-subtitle"
                                        on:click="{(e) => {
                                            if (subNav.page) navigateWrapper($content?.[subNav.page]?.path)
                                        }}"
                                    >
                                        <a href="{$content?.[subNav?.page || '']?.path}" on:click|preventDefault>
                                            {subNav.name}</a
                                        >
                                    </button>
                                </li>
                            {/each}
                        </ul>
                    {/if}
                </ul>
            {/each}
        </nav>

        <button
            class="button-three"
            id="button-burger"
            on:click="{(e) => {
                let button = document.getElementsByClassName('button-three')[0]
                const currentState = button.getAttribute('data-state')
                if (!currentState || currentState === 'closed') {
                    button.setAttribute('data-state', 'opened')
                    button.setAttribute('aria-expanded', 'true')
                } else {
                    button.setAttribute('data-state', 'closed')
                    button.setAttribute('aria-expanded', 'false')
                }
                openMenu = !openMenu
            }}"
            aria-controls="primary-navigation"
            aria-expanded="false"
        >
            <svg stroke="white" fill="none" class="hamburger" viewBox="-10 -10 120 120" width="45">
                <path
                    class="line"
                    stroke-width="10"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="m 20 40 h 60 a 1 1 0 0 1 0 20 h -60 a 1 1 0 0 1 0 -40 h 30 v 70"
                >
                </path>
            </svg>
        </button>

        <nav class="navigation-m" class:open="{openMenu}">
            {#each $navigation as nav, i}
                <!-- svelte-ignore a11y-click-events-have-key-events -->
                <ul class="nav-element-m" style="padding-top: {i == 0 ? '15px' : '0px'}">
                    <li>
                        <button
                            on:click="{(e) => {
                                if (opened == i) opened = -1
                                else opened = i
                                if (nav.endpoint) {
                                    const burger = document.getElementById('button-burger')
                                    if (burger) burger.click()

                                    if (nav.page) navigateWrapper($content?.[nav.page]?.path)
                                }
                            }}"
                            ><a class="nav-title-m" href="{$content?.[nav?.page || '']?.path}" on:click|preventDefault>
                                <div>{@html nav.name}</div>
                                {#if !nav?.endpoint}
                                    <div class="">
                                        {#if i == opened}
                                            <svg
                                                xmlns="http://www.w3.org/2000/svg"
                                                width="16"
                                                height="16"
                                                fill="currentColor"
                                                class="bi bi-chevron-up"
                                                viewBox="0 0 16 16"
                                            >
                                                <path
                                                    fill-rule="evenodd"
                                                    d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"
                                                ></path>
                                            </svg>
                                        {:else}
                                            <svg
                                                xmlns="http://www.w3.org/2000/svg"
                                                width="16"
                                                height="16"
                                                fill="currentColor"
                                                class="bi bi-chevron-down"
                                                viewBox="0 0 16 16"
                                            >
                                                <path
                                                    fill-rule="evenodd"
                                                    d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
                                                ></path>
                                            </svg>
                                        {/if}
                                    </div>
                                {/if}</a
                            >
                        </button>
                    </li>
                    {#if !nav?.endpoint}
                        <ul class="subNav-m {i == opened ? 'visible' : 'hidden'}">
                            {#each nav.elements || [] as subNav}
                                <li>
                                    <button
                                        class="nav-subtitle-m"
                                        on:click="{(e) => {
                                            const burger = document.getElementById('button-burger')
                                            if (burger) burger.click()
                                            if (subNav.page) navigateWrapper($content?.[subNav.page]?.path)
                                        }}"
                                    >
                                        <a href="{$content?.[subNav?.page || '']?.path}" on:click|preventDefault>
                                            {subNav.name}</a
                                        >
                                    </button>
                                </li>
                            {/each}
                        </ul>
                    {/if}
                </ul>
            {/each}
        </nav>
    </div>
</header>

<style lang="less">
    @import "../assets/css/variables.less";
    @switchit: 1000px;
    a {
        text-decoration: none;
        color: white;
    }
    .header {
        min-height: 60px;
        height: 100%;
        background-color: @main-color;
        width: 100%;
        color: white;
        position: relative;
        button {
            color: white;
        }
        display: flex;
        justify-content: center;
        .desktop-nav {
            display: flex;
            align-items: center;
            gap: 2vw;
        }

        @media @mobile {
            font-size: @headingfontsize;
        }

        @media (min-width: 1000px) and (max-width: 1500px) {
            font-size: 15px;
            padding: 10px;
            gap: 10px;
        }
        @media (min-width: 1250px) and (max-width: 1500px) {
            font-size: 17px;
            padding: 10px;
            gap: 10px;
        }
        .button-three {
            --button-color: #333;
            overflow: hidden;
            background: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            margin-top: 8px;
            @media (min-width: 1001px) {
                display: none;
            }
        }

        .button-three .hamburger {
            transition:
                translate 400ms,
                rotate 400ms;
        }

        .button-three[aria-expanded="true"] .hamburger {
            translate: 1px -1px;
            rotate: 0.125turn;
        }

        .button-three .line {
            transition: 1s;
            stroke-dasharray: 60 31 60 300;
        }

        .button-three[aria-expanded="true"] .line {
            stroke-dasharray: 60 105 60 300;
            stroke-dashoffset: -90;
        }
        .container {
            cursor: pointer;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;
            max-width: @body-maxwidth;
            align-items: center;
            @media @mobile {
                padding: 0px 20px;
            }
            @media @tablet {
                padding: 0px 10px;
            }

            .logo {
                display: flex;
                height: 100%;
                align-items: center;
                .symbol {
                    margin-right: min(35px, 2vw);
                }
            }
            .navigation {
                display: flex;
                @media (max-width: @switchit) {
                    display: none;
                }
                align-items: center;
                justify-content: flex-end;
                gap: 20px;
                flex-grow: 1;
                height: 85px;
                padding: 0px 20px;
                @media (min-width: 1000px) and (max-width: 1500px) {
                    font-size: 14px;
                    padding: 10px;
                    gap: 10px;
                }
                @media (min-width: 1250px) and (max-width: 1500px) {
                    font-size: 17px;
                    padding: 10px;
                    gap: 10px;
                }
                .nav-element {
                    display: flex;
                    height: 100%;
                    flex-direction: column;
                    position: relative;
                    .nav-title {
                        padding: 20px 0px;
                        height: 100%;
                        display: flex;
                        align-items: center;
                    }
                    .subNav {
                        opacity: 0;
                        top: 99%;
                        height: 0px;
                        padding: 20px;
                        display: flex;
                        flex-direction: column;
                        gap: 10px;
                        position: absolute;
                        background: #333e52c0;
                        max-width: 450px;
                        width: fit-content;
                        min-width: 100%;
                        z-index: 9999;
                        .nav-subtitle {
                            width: fit-content;
                            max-width: 450px;
                            white-space: nowrap;
                        }
                    }
                    &:hover {
                        .subNav {
                            opacity: 1;
                            height: fit-content;
                        }
                    }
                }
            }
            .navigation-m {
                position: absolute;
                z-index: 9999;
                background-color: @main-color;
                top: 100%;
                left: -100vw;

                width: 100%;
                height: 0px;
                display: flex;
                flex-direction: column;

                transition:
                    height 0ms,
                    left 400ms;
                @media @mobile {
                    padding: 0px 20px;
                }
                @media @tablet {
                    padding: 0px 10px;
                }

                &.open {
                    left: 0px;
                    height: 100vh;
                }
                button {
                    width: 100%;
                    .nav-title-m {
                        cursor: pointer;
                        display: flex;

                        width: 100%;
                        padding: 15px 0px;
                        justify-content: space-between;
                        font-weight: 700;
                        font-size: 1.5rem;
                        padding-bottom: 10px;
                    }
                }
                .subNav-m {
                    height: 100%;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    gap: 5px;
                    .nav-subtitle-m {
                        display: flex;
                        justify-content: flex-start;
                        font-size: 1rem;
                    }
                    &.hidden {
                        max-height: 0px;
                    }
                    &.visible {
                        max-height: 300px;
                    }
                }
            }
        }
    }
</style>
