@using JSMR.UI.Blazor.Components
@using JSMR.UI.Blazor.Services

@inject SessionState Session
@inject NavigationManager Navigation

@inherits LayoutComponentBase

<MudLayout>
    <MudAppBar Elevation="1" Dense="@_dense">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@ToggleDrawer" />
        <MudText>JSMR</MudText>
        <MudSpacer />
        @* <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Href="https://github.com/MudBlazor/MudBlazor" Target="_blank" /> *@
        
        @if (Session.IsAuthenticated)
        {
            @* <span>Logged in as <b>@Session.Me?.Name</b> (@Session.Me?.Role)</span> *@
            <Chip Graphic="Enums.Graphic.Avatar" IconVarient="Enums.IconVarient.Fill" IconSize="Enums.SizeVarient.Small" Color="Enums.ColorVarient.Blue">
                <span>@Session.Me?.Name @* (@Session.Me?.Role) *@</span>
            </Chip>
            <Chip Graphic="Enums.Graphic.Headphones" Color="Enums.ColorVarient.Primary" Click="@LogoutAsync">Logout</Chip>
        }
        else
        {
            <Chip Graphic="Enums.Graphic.Headphones" Color="Enums.ColorVarient.Primary" Url="/login">Login</Chip>
        }
    </MudAppBar>
    <MudDrawer @bind-Open="@_open" ClipMode="_clipMode" Breakpoint="@_breakpoint" Elevation="1" Variant="@DrawerVariant.Mini">
        <MudNavMenu>
            <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home" href="/">Home</MudNavLink>
            <MudNavLink Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Headphones" href="voiceworks">Voice Works</MudNavLink>
            <MudNavLink Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Circle" href="circles">Circles</MudNavLink>
            <MudNavLink Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Tag" href="tags">Tags</MudNavLink>
            <MudNavLink Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Person" href="creators">Creators</MudNavLink>
            <MudNavLink Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.SatelliteAlt" href="scanner">Scanner</MudNavLink>
            <MudNavLink Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.StackedLineChart" href="analytics">Analytics</MudNavLink>
        </MudNavMenu>
    </MudDrawer>
    <MudMainContent Class="pt-18 px-8">
        @Body
    </MudMainContent>
    @* Required *@
    <MudThemeProvider @ref="_mudThemeProvider" @bind-IsDarkMode="_isDarkMode" />
    <MudPopoverProvider />

    @* Needed for dialogs *@
    <MudDialogProvider />

    @* Needed for snackbars *@
    <MudSnackbarProvider />
</MudLayout>

<RadzenComponents @rendermode="RenderMode.InteractiveAuto" />

@code{
    private bool _open = false;
    private bool _dense = true;
    private Breakpoint _breakpoint = Breakpoint.Lg;
    private DrawerClipMode _clipMode = DrawerClipMode.Always;

    private void ToggleDrawer()
    {
        _open = !_open;
    }

    private bool _isDarkMode;
    private MudThemeProvider _mudThemeProvider;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _isDarkMode = await _mudThemeProvider.GetSystemDarkModeAsync();
            StateHasChanged();
        }
    }

    protected override void OnInitialized()
    {
        Session.Changed += OnSessionChanged;
    }

    private void OnSessionChanged() => InvokeAsync(StateHasChanged);

    private async Task OnLogout(MouseEventArgs _)
    {
        await Session.LogoutAsync();
    }

    public void Dispose()
    {
        Session.Changed -= OnSessionChanged;
    }

    private async Task LogoutAsync()
    {
        await Session.LogoutAsync();
        Navigation.NavigateTo("/login");
    }
}