@using Microsoft.Extensions.Options
@using Moonlight.Frontend.Configuration
@using ShadcnBlazor.Cards
@using ShadcnBlazor.Sidebars

@inject IOptions<SystemSettingsOptions> Options

<div class="mt-5 flex flex-col md:flex-row gap-5">
    <Card ClassName="flex py-2 grow-0 min-w-56 max-h-[65vh] md:min-h-[65vh]">
        <CardContent ClassName="px-2 flex flex-col gap-y-1 h-full max-h-[65vh] overflow-y-auto scrollbar-thin">
            @foreach (var menuPage in Pages)
            {
                <SidebarMenuButton @onclick="() => Navigate(menuPage)" IsActive="@(CurrentPage == menuPage)" ClassName="overflow-visible">
                    <DynamicComponent Type="@menuPage.IconComponentType" />
                    <span>@menuPage.Name</span>
                </SidebarMenuButton>
            }
        </CardContent>
    </Card>
    @if (CurrentPage != null)
    {
        <Card ClassName="flex grow">
            <CardHeader>
                <CardTitle>@CurrentPage.Name</CardTitle>
                <CardDescription>@CurrentPage.Description</CardDescription>
            </CardHeader>
            <CardContent>
                <DynamicComponent Type="@CurrentPage.ComponentType" />
            </CardContent>
        </Card>
    }
</div>

@code
{
    private SystemSettingsPage[] Pages;
    private SystemSettingsPage? CurrentPage;

    protected override void OnInitialized()
    {
        Pages = Options
            .Value
            .Components
            .OrderBy(x => x.Order)
            .ToArray();

        CurrentPage = Pages.FirstOrDefault();
    }

    private void Navigate(SystemSettingsPage page)
        => CurrentPage = page;
}