@inject INavigationService navigationService;
@inject NavigationManager navigationManager;

@if (isOnPage) {
    <NavLink href="@Page.Href" class="desktopNavLink navSelected">
        <div class="navName">
            @Page.Name
        </div>
    </NavLink>
}
else {
    <NavLink @onclick="() => navigationService.ChangeNavigationState(NavigationStateType.Default)" href="@Page.Href" class="desktopNavLink">
        <div class="navName">
            @Page.Name
        </div>
    </NavLink>
}

<style>

    .navName {
        margin: auto;
        color: white;
        font-size: 1.3rem;
        font-weight: 600;
        text-align: center;
    }


    .desktopNavLink {
        cursor: pointer;
        height: 60px;
        width: 100%;
        display: flex;
    
        background-color: var(--primary);
        border: 1px solid var(--primary);
    }
    
    .desktopNavLink:first-of-type {    
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    
    .desktopNavLink:last-of-type {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
   
        .desktopNavLink:hover {
            color: #8EC3FF;
            background-color: var(--primary-hover);
            border-color: var(--primary-border-hover);
        }

    .navSelected {
        background-color: var(--primary-hover);
    }

</style>


@code {

    [Parameter]
    public WebPageModel Page { get; set; } = default!;

    bool isOnPage = false;

    protected override Task OnParametersSetAsync() {
        var uri = navigationManager.Uri.Remove(0, navigationManager.BaseUri.Count()).ToLower();

        isOnPage = Page.Href.ToLower().Equals(uri);
        return Task.CompletedTask;
    }


    void OnNavigationChanged() {
        StateHasChanged();
    }

    void OnBack() {
        navigationService.Back();
    }

}