@using Components.Utils
@inject INavigationService NavigationService;
@inject NavigationManager NavigationManager;

@if (isOnPage)
{
    <NavLink href="@Page.Href" class="desktopNavLink navSelected">
        <div class="navName">
            @Page.Name
        </div>
    </NavLink>
}
else
{
    <NavLink target="@Links.GetTarget(Page.Href)"
             @onclick="() => { NavigationService.ChangeNavigationState(NavigationStateType.Default); NavigationService.ChangeNavigationSectionId(-1); }"
             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;

    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();
    }

}