@using Moonlight.App.Helpers
@using Moonlight.App.Repositories
@using Moonlight.App.Services
@using Moonlight.App.Services.Sessions
@using Moonlight.App.Database.Entities
@using Task = System.Threading.Tasks.Task

@inject IdentityService IdentityService
@inject NavigationManager NavigationManager
@inject CookieService CookieService

@if (User != null)
{
    <div class="menu menu-column justify-content-center"
         data-kt-menu="true">
        <div class="menu-item">
            <div class="dropdown">
                <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    <TL>Create</TL>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item py-2" href="/servers/create">
                            <TL>Server</TL>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item py-2" href="/domains/create">
                            <TL>Domain</TL>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item py-2" href="/webspaces/create">
                            <TL>Webspace</TL>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
}

<div class="app-navbar flex-shrink-0">
    @if (User != null)
    {
        <div class="app-navbar-item ms-1 ms-lg-3">
            <a href="/support" class="btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px w-md-40px h-md-40px position-relative">
                <i class="bx bx-support"></i>
            </a>
        </div>

        <div class="app-navbar-item ms-1 ms-lg-3 dropdown">
            <!-- Trigger -->
            <a class="cursor-pointer d-block symbol symbol-35px symbol-md-40px" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                <img alt="Avatar" src="/api/moonlight/avatar/@(User.Id)" width="35" height="35">
            </a>
  
            <!-- Dropdown Menu -->
            <div class="dropdown-menu dropdown-menu-end w-275px py-1" aria-labelledby="dropdownMenuLink">
                <div class="dropdown-item py-4 bg-light bg-hover-light">
                    <div class="d-flex align-items-center">
                        <img alt="Avatar" src="/api/moonlight/avatar/@(User.Id)" class="rounded-circle me-3" width="50" height="50">
                        <div class="d-flex flex-column">
                            <div class="fw-bold d-flex align-items-center">
                                <div class="@(User.StreamerMode ? "blur" : "")">
                                    @(User.FirstName) @(User.LastName)
                                </div>
                                @if (User.Admin)
                                {
                                    <span class="badge bg-success fw-bold ms-2">Admin</span>
                                }
                            </div>
                            <a class="fw-semibold text-muted text-decoration-none @(User.StreamerMode ? "blur" : "")">@User.Email</a>
                        </div>
                    </div>
                </div>
                <hr class="dropdown-divider">
                <a href="/profile" class="dropdown-item py-4">Profile</a>
                <a href="#" @onclick:preventDefault @onclick="Logout" class="dropdown-item py-4">Logout</a>
            </div>
        </div>
    }
</div>

@code
{
    private User? User;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            User = IdentityService.User;

            await InvokeAsync(StateHasChanged);
        }
    }

    private async void Logout()
    {
        await CookieService.SetValue("token", "", 1);
        NavigationManager.NavigateTo(NavigationManager.Uri, true);
    }
}