@page "/menus"
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption

<h3>Menu</h3>

<h4>A list of menus that provide navigation for pages and features.</h4>

<Tips class="mt-3">
    <p><code>Menu</code> component is generally used for menu navigation, i.e. redirect navigation by clicking on the address bar after the menu, but sometimes you don't need navigation in real life, by setting <code>OnClick</code> callback delegate, custom processing logic, at this point by setting Property <code>The</code> of TheableNavigation, in this case all <code>Menu</code> are set to <code>true</code> disable navigation because they are analog menu clicks and do not actually navigate the address bar</p>
</Tips>

<DemoBlock Title="Top bar" Introduction="A wide range of basic usages are applicable." Name="TopBar">
    <Menu Items="@Items" DisableNavigation="true" OnClick="@OnClickMenu" />
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Bottom bar" Introduction="Set the parameter <code>IsBottom</code> value is <b>true</b> menu bar at the bottom of the container, for the mover" Name="BottomBar">
    <Tips>
        <div>Because the <b>bottom bar menu</b> is relatively positioned relative to the parent container, you need to set the parent node style <code>position-</code>, or customize the style <code>theposition-fixed</code></div>
    </Tips>
    <div style="height: 120px; position: relative;">
        <div>@ClickedMenuItemText</div>
        <Menu Items="@BottomItems" DisableNavigation="true" OnClick="@OnClickBottomMenu" IsBottom="true" />
    </div>
</DemoBlock>

<DemoBlock Title="Top bar menu with icon" Introduction="For simple website apps, set the menu icon by setting the menu item <code>the <code>Icon</code> property of the MenuItem</code>" Name="IconTop">
    <Menu Items="@IconItems" DisableNavigation="true" />
</DemoBlock>

<DemoBlock Title="Sidebar" Introduction="For sites with left and right structure layouts, change the navigation menu to sidebar by setting <code></code>" Name="LeftRightLayout">
    <div style="width:220px; border-right: 1px solid #e6e6e6; padding-right: 4px;">
        <Menu Items="@SideMenuItems" DisableNavigation="true" IsVertical="true" OnClick="@OnClickSideMenu" />
    </div>
    <BlockLogger @ref="TraceSideMenu" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Sidebar menu with icon" Introduction="Set the menu icon by setting the menu item <code>the <code>Icon</code> property of the MenuItem</code>" Name="IconLeft">
    <div style="width:220px;">
        <Menu Items="@IconSideMenuItems" DisableNavigation="true" IsVertical="true" style="border-right: 1px solid #e6e6e6;" />
    </div>
</DemoBlock>

<DemoBlock Title="Sidebar for accordion effects" Introduction="Set the accordion effect sidebar menu by setting the <code>IsAccordion</code> property" Name="Accordion">
    <div style="width:220px;">
        <Menu Items="@IconSideMenuItems" DisableNavigation="true" IsVertical="true" IsAccordion="true" style="border-right: 1px solid #e6e6e6;" />
    </div>
</DemoBlock>

<DemoBlock Title="Sidebar effect with shrink" Introduction="Set the sidebar menu to the put-away state by setting the <code>IsCollapsed</code> property" Name="ClickShrink">
    <Tips>
        <p>@(new MarkupString(Localizer["AlertText"].Value))</p>
    </Tips>
    <p>In this example, the layout component <code>Layout</code> is used to build a web page, set the <code>SideWith'0'</code> turn off the sidebar width setting, and use the internal menu width from fit</p>
    <Layout SideWidth="0" IsFullSide="true" ShowFooter="true" ShowCollapseBar="true" class="layout-menu-demo"
            Menus="IconSideMenuItems">
        <Header>
            <div class="menu-demo-header">
                I am the title of the website
            </div>
        </Header>
        <Side>
            <div class="layout-banner">
                <img class="layout-logo" src="_content/BootstrapBlazor.Shared/images/logo.png" />
                <div class="layout-title">
                    <span>Backstage management</span>
                </div>
            </div>
        </Side>
        <Main>
            <div style="padding: 10rem 1rem;">Main</div>
        </Main>
        <Footer>
            <a href="@WebsiteOption.CurrentValue.BootstrapAdminLink" target="_blank">Bootstrap Admin</a>
        </Footer>
    </Layout>
</DemoBlock>

<DemoBlock Title="Menu with pendant" Introduction="Set the custom component into the menu by setting the <code>Component</code> property of the MenuItem</code> <code>" Name="Wiget">
    <div style="width:220px;">
        <Menu Items="@WidgetIconSideMenuItems" DisableNavigation="true" IsVertical="true" style="border-right: 1px solid #e6e6e6;" />
    </div>
</DemoBlock>

<DemoBlock Title="Custom node shrinkage" Introduction="Set whether the node is receding by setting the <code>IsCollapsed</code> property of the <code>MenuItem</code>" Name="CustomNode">
    <p>In this example, the <b>permission settings</b>node is expanded and the remaining nodes are in the recess state</p>
    <div style="width:220px;">
        <Menu Items="@CollapsedIconSideMenuItems" DisableNavigation="true" IsVertical="true" style="border-right: 1px solid #e6e6e6;" />
    </div>
</DemoBlock>

<DemoBlock Title="Dynamically change the menu" Introduction="Change the menu item by dynamically setting <code>Theitems</code> property values" Name="Dynamic">
    <div class="mt-3" style="width:220px;">
        <Menu Items="@DynamicSideMenuItems" DisableNavigation="true" IsVertical="true" style="border-right: 1px solid #e6e6e6;" />
    </div>
    <Button Text="Update the menu" OnClick="UpdateMenu" />
    <Button Text="Reset the menu" OnClick="ResetMenu" />
</DemoBlock>

<DemoBlock Title="Some menus disable functionality" Introduction="Set whether the node is disabled by setting the <code>IsDisabled</code> property of the</code>MenuItem<code>" Name="PartDisable">
    <p>In this example <b>navigation two</b> node is disabled and the menu and its submenu are not clickable</p>
    <Menu Items="@DisabledMenuItems" DisableNavigation="true" OnClick="@OnClick2" />
    <p class="mt-3"><b>Example of a disablement of the sidebar</b></p>
    <div style="width:220px; border-right: 1px solid #e6e6e6;">
        <Menu Items="@DisabledMenuItems" DisableNavigation="true" IsVertical="true" OnClick="@OnClick2" />
    </div>
    <BlockLogger @ref="Trace2" class="mt-3" />
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Menus
{
    [NotNull]
    private BlockLogger? Trace { get; set; }

    [NotNull]
    private BlockLogger? Trace2 { get; set; }

    [NotNull]
    private BlockLogger? TraceSideMenu { get; set; }

    [NotNull]
    private IEnumerable<MenuItem>? Items { get; set; }

    [NotNull]
    private IEnumerable<MenuItem>? BottomItems { get; set; }

    [NotNull]
    private IEnumerable<MenuItem>? IconItems { get; set; }

    [NotNull]
    private IEnumerable<MenuItem>? SideMenuItems { get; set; }

    [NotNull]
    private IEnumerable<MenuItem>? IconSideMenuItems { get; set; }

    [NotNull]
    private IEnumerable<MenuItem>? WidgetIconSideMenuItems { get; set; }

    [NotNull]
    private IEnumerable<MenuItem>? CollapsedIconSideMenuItems { get; set; }

    [NotNull]
    private IEnumerable<MenuItem>? DisabledMenuItems { get; set; }

    [NotNull]
    private IEnumerable<MenuItem>? DynamicSideMenuItems { get; set; }

    [Inject]
    [NotNull]
    private IStringLocalizer<Menus>? Localizer { get; set; }

    private Task OnClickMenu(MenuItem item)
    {
        Trace.Log($"菜单点击项: {item.Text}");
        return Task.CompletedTask;
    }

    private string? ClickedMenuItemText { get; set; }

    private Task OnClickBottomMenu(MenuItem item)
    {
        ClickedMenuItemText = item.Text;
        StateHasChanged();
        return Task.CompletedTask;
    }

    private Task OnClick2(MenuItem item)
    {
        Trace2.Log($"菜单点击项: {item.Text}");
        return Task.CompletedTask;
    }

    private Task OnClickSideMenu(MenuItem item)
    {
        TraceSideMenu?.Log($"菜单点击项: {item.Text}");
        return Task.CompletedTask;
    }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        Items = await MenusDataGerator.GetTopItemsAsync(Localizer);
        IconItems = await MenusDataGerator.GetTopIconItemsAsync(Localizer);
        SideMenuItems = await MenusDataGerator.GetSideMenuItemsAsync(Localizer);
        IconSideMenuItems = await MenusDataGerator.GetIconSideMenuItemsAsync(Localizer);
        WidgetIconSideMenuItems = await MenusDataGerator.GetWidgetIconSideMenuItemsAsync(Localizer);
        CollapsedIconSideMenuItems = await MenusDataGerator.GetCollapsedIconSideMenuItemsAsync(Localizer);
        DisabledMenuItems = await MenusDataGerator.GetDisabledMenuItemsAsync(Localizer);
        DynamicSideMenuItems = await MenusDataGerator.GetSideMenuItemsAsync(Localizer);
        BottomItems = await MenusDataGerator.GetBottomMenuItemsAsync(Localizer);
    }

    private async Task UpdateMenu()
    {
        DynamicSideMenuItems = await MenusDataGerator.GetIconSideMenuItemsAsync(Localizer);
    }

    private async Task ResetMenu()
    {
        DynamicSideMenuItems = await MenusDataGerator.GetSideMenuItemsAsync(Localizer);
    }

    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem()
        {
            Name = "Items",
            Description = Localizer["Desc1"],
            Type = "IEnumerable<MenuItem>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem()
        {
            Name = "IsVertical",
            Description = Localizer["Desc2"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem()
        {
            Name = "IsBottom",
            Description = Localizer["Desc3"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "IsAccordion",
            Description = Localizer["Desc4"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "DisableNavigation",
            Description = Localizer["Desc5"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "OnClick",
            Description = Localizer["Desc6"],
            Type = "Func<MenuItem, Task>",
            ValueList = " — ",
            DefaultValue = " — "
        }
    };
}