@inherits LayoutComponentBase

<MudThemeProvider @ref="@_mudThemeProvider" @bind-IsDarkMode="@IsDarkMode" />
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>
    <MudAppBar Elevation="0">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
        <MudSpacer />
        <MudIconButton Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Inherit" Href="https://mudblazor.com/" Target="_blank" />
        <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Href="https://github.com/MudBlazor/MudBlazor/" Target="_blank" />
    </MudAppBar>
    <MudDrawer @bind-Open="_drawerOpen" Elevation="1">
        <MudDrawerHeader>
            <MudText Typo="Typo.h6">OpenApiUI Demo</MudText>
        </MudDrawerHeader>
        <NavMenu />
        <div class="d-flex justify-left align-end mud-height-full">
            <MudSwitch @bind-Value="@IsDarkMode" Color="MudBlazor.Color.Primary" Class="ma-4" T="bool" Label="Dark Mode" />
        </div>
    </MudDrawer>
    <CascadingValue Value="@IsDarkMode">
        <MudMainContent>
            <MudContainer MaxWidth="MaxWidth.ExtraExtraLarge">
                @Body
            </MudContainer>
        </MudMainContent>
    </CascadingValue>
</MudLayout>

@code {
    bool _drawerOpen = true;
    private bool IsDarkMode;
    private MudThemeProvider? _mudThemeProvider;

    void DrawerToggle() => _drawerOpen = !_drawerOpen;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            IsDarkMode = await _mudThemeProvider!.GetSystemPreference();
            await _mudThemeProvider.WatchSystemPreference(OnSystemPreferenceChanged);
            StateHasChanged();
        }
    }

    private async Task OnSystemPreferenceChanged(bool newValue)
    {
        IsDarkMode = newValue;
        await InvokeAsync(StateHasChanged);
    }

}