@inherits LayoutComponentBase
@inject ISearchService SearchService
@inject IDataCollectionService DataCollectionService
@inject NavigationManager NavigationManager
@using Model.Website.Data
@using Services.Website
@implements IDisposable

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

<MudHidden Breakpoint="Breakpoint.MdAndUp">
    <MudIconButton Icon="@Icons.Material.Filled.Menu"
                   Color="Color.Inherit"
                   Class="mobile-menu-fab"
                   OnClick="@(() => _drawerOpen = true)"/>
</MudHidden>

<MudLayout>
    <MudDrawer @bind-Open="_drawerOpen"
               Variant="DrawerVariant.Responsive"
               ResponsiveBreakpoint="Breakpoint.Md"
               ClipMode="DrawerClipMode.Always"
               Elevation="2">
        <div class="drawerHeader">
            <MudText Typo="Typo.h5" Class="drawerTitle">IGP Fan Reference</MudText>
        </div>
        <MudNavMenu Class="drawerNav">
            @foreach (var page in WebsiteData.GetPages())
            {
                <MudNavLink Href="@(page.Href)" Icon="@(page.Icon)">@(page.Name)</MudNavLink>
            }
        </MudNavMenu>
        <MudSpacer/>
        <div class="drawerFooter">
            <SearchButtonComponent/>
        </div>
    </MudDrawer>

    <MudMainContent>
        <MudContainer Class="px-8" MaxWidth="MaxWidth.False">
            <div id="content" class="content">
                @Body
            </div>
        </MudContainer>
    </MudMainContent>
</MudLayout>

<FooterComponent/>

<style>
    .mobile-menu-fab {
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 999;
        background-color: var(--accent);
        border-radius: 8px;
        padding: 8px;
        color: white;
    }

    .drawerHeader {
        padding: 20px 16px 16px;
        border-bottom: 1px solid var(--paper-border);
    }

    .drawerTitle {
        font-weight: 700;
        color: white;
    }

    .drawerNav {
        padding: 8px 0;
    }

    .drawerFooter {
        padding: 16px;
    }
</style>

@code {

    private bool _isDarkMode = true;
    private MudThemeProvider _mudThemeProvider = null!;

    bool _drawerOpen = true;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        CollectFirstPageLoaded();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            //TODO: Support light mode
            //_isDarkMode = await _mudThemeProvider.GetSystemPreference();
            //StateHasChanged();
        }
    }

    private void CollectFirstPageLoaded()
    {
        var skipBaseUri = NavigationManager.Uri.Substring(NavigationManager.BaseUri.Length,
            NavigationManager.Uri.Length - NavigationManager.BaseUri.Length);
        var rootUrl = skipBaseUri.Split("/").First();
        if (rootUrl.Trim().Equals(""))
        {
            rootUrl = "home";
        }

        DataCollectionService.SendEvent(DataCollectionKeys.FirstPage,
            new Dictionary<string, string> { { "page", rootUrl } });
    }

    void IDisposable.Dispose()
    {
    }
}