@inherits LayoutComponentBase
@inject INavigationService navigationService
@implements IDisposable

@{
    var visibleStyle = navigationService.GetNavigationSectionId() > 0 ? "clickOffVisible" : "";
}

<div onclick="@MenuClosed" class="clickOffBackground @visibleStyle">

</div>

<div class="desktopNavContainer">
    <div class="menuHeader">
        <NavLink href="/" class="websiteTitle">
            IGP Fan Reference
        </NavLink>

        @foreach (var webSection in WebSections)
        {
            var isSelected = navigationService.GetNavigationSectionId().Equals(webSection.Id);
            var sectionButtonStyle = "sectionButton";
            if (isSelected)
            {
                sectionButtonStyle += " sectionButtonSelected";
            }
            
            <div>
                <button onclick="@(() => { MenuClicked(webSection.Id); })" class="@sectionButtonStyle">@webSection.Name</button>

                @if (isSelected)
                {
                    <div class="navMenuPosition">
                        <div class="navMenuContainer">
                            <DesktopNavSectionComponent Section=webSection /> 
                        </div>
                    </div>
                }
            </div>
        }
    </div>
</div>

<style>
    .clickOffBackground {
        top: 0;
        left: 0;
        position: fixed;
        width: 100vw;
        height: 100vh;
        visibility: hidden;
    }
    
    .clickOffBackground.clickOffVisible {
        visibility:visible;
    }

    .sectionButton {
        cursor: pointer;  
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 10px;
        top: -11px;
        position: relative;
        z-index: 50000;
    }

    .desktopNavContainer {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 40px;
        background-color: rgba(255,255,255,0.1);
    }

    .menuHeader {
        border-bottom: 4px solid black;
        position: fixed;
        width: 100%;
        padding: 12px;
        display: flex;
        justify-content: center;
        gap: 8px;
        height: 50px;
        background-color: var(--accent);
    }


    .websiteTitle {
        font-weight: bold;
        color: white;
        margin-right: 32px;
    }

    .navMenuPosition {
       position: relative;
       top: calc(100% - 36px);
       left: calc(50% + -330px / 2);
       width: 0;
       height: 0;
    }

    .navMenuContainer {
        width: 330px;
        flex-direction: row;
        gap: 20px;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left: 4px;
        padding-right: 4px;
        background-color: rgba(22, 22, 24, 0.95);
        border: 1px solid black;
        border-radius: 4px;
        display: flex;
    }
    
    .sectionButtonSelected {
        padding-bottom: 14px;
        box-shadow: 0 2px 3px black;
        background-color: var(--info);
        transform: translateY(-1px) scale(1.08);
    }

    @@media only screen and (max-width: 1025px) {
        .desktopNavContainer {
            display: none;
        }
    }

    @@media only screen and (max-width: 480px) {
        .desktopNavContainer {
            display: none;
        }
    }

</style>

@code {

    [Parameter]
    public List<WebSectionModel> WebSections { get; set; } = default!;

    [Parameter]
    public List<WebPageModel> WebPages { get; set; } = default!;


    protected override void OnInitialized()
    {
        navigationService.Subscribe(StateHasChanged);
    }

    void IDisposable.Dispose()
    {
        navigationService.Unsubscribe(StateHasChanged);
    }

    void MenuClicked(int menuName)
    {
        navigationService.ChangeNavigationSectionId(menuName);
    }

    void MenuClosed()
    {
        navigationService.ChangeNavigationSectionId(-1);
    }

    void HoverOut(MouseEventArgs mouseEventArgs)
    {
        navigationService.ChangeNavigationState(NavigationStateType.Default);
    }

}