@using AIStudio.Settings.DataModel
@using AIStudio.Components

@using Microsoft.AspNetCore.Components.Routing
@using MudBlazor

@inherits LayoutComponentBase

<MudPaper Height="calc(100vh);" Elevation="0">
    <MudLayout>
        @if (!this.performingUpdate)
        {
            @if (this.SettingsManager.ConfigurationData.App.NavigationBehavior is NavBehavior.EXPAND_ON_HOVER or NavBehavior.ALWAYS_EXPAND)
            {
                <MudDrawerContainer Class="mud-height-full absolute">
                    <MudDrawer @bind-Open="@this.navBarOpen" MiniWidth="@NAVBAR_COLLAPSED_WIDTH" Width="@NAVBAR_EXPANDED_WIDTH" Elevation="1" Fixed="@true" Variant="@DrawerVariant.Mini" OpenMiniOnHover="@(this.SettingsManager.ConfigurationData.App.NavigationBehavior is NavBehavior.EXPAND_ON_HOVER)" Color="Color.Default">
                        <MudNavMenu>
                            @foreach (var navBarItem in this.navItems)
                            {
                                <MudNavLink Href="@navBarItem.Path" Match="@(navBarItem.MatchAll ? NavLinkMatch.All : NavLinkMatch.Prefix)" Icon="@navBarItem.Icon" Style="@navBarItem.SetColorStyle(this.SettingsManager)" Class="custom-icon-color">
                                    @navBarItem.Name
                                </MudNavLink>
                            }
                        </MudNavMenu>
                        
                        <MudSpacer/>
                        
                        <MudStack AlignItems="AlignItems.Center">
                            <MudToolBar WrapContent="true">
                                <VoiceRecorder />
                            </MudToolBar>
                        </MudStack>
                    </MudDrawer>
                </MudDrawerContainer>
            }
            else
            {
                <MudPaper Width="4em" Class="mud-height-full absolute" Style="display: flex; flex-direction: column;">
                    <MudNavMenu>
                        @foreach (var navBarItem in this.navItems)
                        {
                            if (this.SettingsManager.ConfigurationData.App.NavigationBehavior is NavBehavior.NEVER_EXPAND_USE_TOOLTIPS)
                            {
                                <MudTooltip Text="@navBarItem.Name" Placement="Placement.Right">
                                    <MudNavLink Href="@navBarItem.Path" Match="@(navBarItem.MatchAll ? NavLinkMatch.All : NavLinkMatch.Prefix)" Icon="@navBarItem.Icon" Style="@navBarItem.SetColorStyle(this.SettingsManager)" Class="custom-icon-color"/>
                                </MudTooltip>
                            }
                            else
                            {
                                <MudNavLink Href="@navBarItem.Path" Match="@(navBarItem.MatchAll ? NavLinkMatch.All : NavLinkMatch.Prefix)" Icon="@navBarItem.Icon" Style="@navBarItem.SetColorStyle(this.SettingsManager)" Class="custom-icon-color"/>
                            }
                        }
                    </MudNavMenu>

                    <MudSpacer/>

                    <MudStack AlignItems="AlignItems.Center">
                        <MudToolBar WrapContent="true">
                            <VoiceRecorder />
                        </MudToolBar>
                    </MudStack>
                </MudPaper>
            }
        }

        <MudMainContent Class="mud-height-full pt-1" Style="@this.PaddingLeft">
            <MudContainer MaxWidth="MaxWidth.ExtraExtraLarge" Class="mud-height-full" Style="margin-left: 5em; width: calc(100% - 5em);">
                @if (!this.performingUpdate)
                {
                    @this.Body
                }
                
                <MudOverlay Visible="@this.performingUpdate" DarkBackground="@true" LockScroll="@true">
                    <MudText Typo="Typo.h3">@T("Please wait for the update to complete...")</MudText>
                    <MudProgressLinear Color="Color.Primary" Indeterminate="@true" Size="Size.Large" Rounded="@true"/>
                </MudOverlay>
            </MudContainer>
        </MudMainContent>
    </MudLayout>
</MudPaper>

<MudThemeProvider @ref="@this.themeProvider" Theme="@this.ColorTheme" IsDarkMode="@this.useDarkMode" />