@page "/tabs"
@inject IStringLocalizer<Tabs> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["H1"]</h4>

<p>@((MarkupString)Localizer["P1"].Value)</p>

<Tips>
    <p>
        @((MarkupString)Localizer["TipsP"].Value)
        <ul class="ul-demo">
            <li>@Localizer["TipsLi1"]</li>
            <li>@Localizer["TipsLi2"]</li>
        </ul>
        <div>@((MarkupString)Localizer["TipsDiv"].Value)</div>
    </p>
    <p>@Localizer["TipsP2"]</p>
</Tips>

<Block Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]">
    <Tab>
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
    </Tab>
</Block>

<Block Title="@Localizer["Blcok2Title"]" Introduction='@Localizer["Block2Intro"]'>
    <Tab IsCard="true">
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
    </Tab>
</Block>

<Block Title="@Localizer["Block3Title"]" Introduction='@Localizer["Block3Intro"]'>
    <Tab IsBorderCard="true">
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
    </Tab>
</Block>

<Block Title="@Localizer["Block4Title"]" Introduction='@Localizer["Block4Intro"]'>
    <Tab IsCard="true">
        <TabItem Text="@Localizer["TabItem1Text"]" Icon="fa fa-user">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]" Icon="fa fa-dashboard">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]" Icon="fa fa-sitemap">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]" Icon="fa fa-bank">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
    </Tab>
</Block>

<Block Title="@Localizer["Block5Title"]" Introduction='@Localizer["Block5Intro"]'>
    <Tips>
        @((MarkupString)Localizer["Tips2"].Value)
    </Tips>
    <Tab IsCard="true" ShowClose="true">
        <TabItem Text="@Localizer["TabItem1Text"]" Icon="fa fa-user" Closable="false">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]" Icon="fa fa-dashboard">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]" Icon="fa fa-sitemap">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]" Icon="fa fa-bank">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
    </Tab>
</Block>

<Block Title="@Localizer["Block6Title"]" Introduction="@Localizer["Block6Intro"]">
    <p class="text-center">
        <div class="btn-group">
            <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Top)">Top</button>
            <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Right)">Right</button>
            <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Bottom)">Bottom</button>
            <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Left)">Left</button>
        </div>
    </p>
    <Tab Placement="@BindPlacement" Height="200">
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem5Text"]">
            <div>@Localizer["TabItem5Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem6Text"]">
            <div>@Localizer["TabItem6Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem7Text"]">
            <div>@Localizer["TabItem7Content"]</div>
        </TabItem>
    </Tab>
    <Divider Text="@Localizer["DividerText"]"></Divider>
    <Tab Placement="@BindPlacement" IsCard="true" Height="200">
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem5Text"]">
            <div>@Localizer["TabItem5Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem6Text"]">
            <div>@Localizer["TabItem6Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem7Text"]">
            <div>@Localizer["TabItem7Content"]</div>
        </TabItem>
    </Tab>
    <Divider Text="@Localizer["DividerText"]"></Divider>
    <Tab Placement="@BindPlacement" IsBorderCard="true" Height="200">
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem5Text"]">
            <div>@Localizer["TabItem5Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem6Text"]">
            <div>@Localizer["TabItem6Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem7Text"]">
            <div>@Localizer["TabItem7Content"]</div>
        </TabItem>
    </Tab>
</Block>

<Block Title="@Localizer["Block7Title"]" Introduction="@Localizer["Block7Intro"]">
    <p>
        <Button Icon="fa fa-plus-circle" OnClickWithoutRender="@(() => AddTab(TabSet))" Text="@Localizer["AddButtonText"]">
        </Button>
        <Button Color="Color.Danger" Icon="fa fa-minus-circle" IsDisabled="@RemoveEndable" OnClickWithoutRender="@(() => RemoveTab(TabSet))" Text="@Localizer["RmoveButtonText"]">
        </Button>
        <Button Icon="fa fa-fa" OnClickWithoutRender="@(() => Active(TabSet))" Text="@Localizer["ActiveButtonText"]">
        </Button>
    </p>
    <Tab IsBorderCard="true" @ref="TabSet">
        <TabItem Text="@Localizer["TabItem1Text"]">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem7Text"]">
            <div>@Localizer["TabItem7Content"]</div>
        </TabItem>
    </Tab>
</Block>

<Block Title="@Localizer["Block8Title"]" Introduction="@Localizer["Block8Intro"]">
    <p>
        @((MarkupString)Localizer["P2"].Value)
    </p>
    <Tab IsBorderCard="true">
        <TabItem Text="@Localizer["TabItem8Text"]">
            <Counter></Counter>
        </TabItem>
        <TabItem Text="@Localizer["TabItem9Text"]">
            <FetchData></FetchData>
        </TabItem>
    </Tab>
</Block>

<Block Title="@Localizer["Block9Title"]" Introduction="@Localizer["Block9Intro"]">
    <p>
        @((MarkupString)Localizer["P3"].Value)
    </p>
    <Layout SideWidth="120px" style="min-height: 180px; border: 1px solid #ddd; border-radius: 4px;">
        <Header>
            <div class="header">@Localizer["Block9Div"]</div>
        </Header>
        <Side>
            <div style="border-right: 1px solid #e6e6e6; height: 100%; overflow: auto; padding: 1rem 0; background-color: #f8f9fa;">
                <Menu Items="@GetSideMenuItems()" IsVertical="true" OnClick="@OnClickMenuItem" @ref="TabMenu" />
            </div>
        </Side>
        <Main>
            <div class="tab-main-demo">
                <Tab @ref="TabSetMenu" ShowClose="true">
                </Tab>
            </div>
        </Main>
    </Layout>
</Block>

<Block Title="@Localizer["Block10Title"]" Introduction="@Localizer["Block10Intro"]">
    <Tips>@((MarkupString)Localizer["Tips3"].Value)</Tips>
    <p>
        <button type="button" class="btn btn-outline-primary" @onclick="@(e => AddTab(TabSet2))">
            <i class="fa fa-plus-circle"></i>
            <span>@Localizer["AddButtonText"]</span>
        </button>
        <button type="button" class="btn btn-outline-danger" disabled="@((TabSet2?.Items.Count() > 4) ? null : "true")" @onclick="@(e => RemoveTab(TabSet2!))">
            <i class="fa fa-minus-circle"></i>
            <span>@Localizer["RmoveButtonText"]</span>
        </button>
    </p>
    <Tab ShowExtendButtons="true" ShowClose="true" @ref="TabSet2">
        <TabItem Text="@Localizer["TabItem1Text"]" Closable="false">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem7Text"]">
            <div>@Localizer["TabItem7Content"]</div>
        </TabItem>
    </Tab>
</Block>

<Block Title="@Localizer["Block11Title"]" Introduction="@Localizer["Block11Intro"]">
    <Tab IsBorderCard="true" IsOnlyRenderActiveTab="true">
        <TabItem Text="@Localizer["TabItem8Text"]">
            <Counter></Counter>
        </TabItem>
        <TabItem Text="@Localizer["TabItem9Text"]">
            <FetchData></FetchData>
        </TabItem>
    </Tab>
</Block>

<AttributeTable Items="@GetAttributes()" Title="@Localizer["AttTitle"]" />

<MethodTable Items="@GetMethods()" Title="@Localizer["MethodTitle"]" />

// 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/

using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using Microsoft.AspNetCore.Components;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Tabs
    {
        [NotNull]
        private Tab? TabSet { get; set; }

        [NotNull]
        private Tab? TabSet2 { get; set; }

        /// <summary>
        /// OnInitialized 方法
        /// </summary>
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            await base.OnAfterRenderAsync(firstRender);

            if (firstRender)
            {
                var menuItem = TabMenu?.Items.FirstOrDefault();
                if (menuItem != null)
                {
                    await InvokeAsync(() =>
                    {
                        var _ = TabMenu?.OnClick?.Invoke(menuItem);
                    });
                }
            }
        }

        private Task AddTab(Tab tabset)
        {
            var text = $"Tab {tabset.Items.Count() + 1}";
            tabset.AddTab(new Dictionary<string, object?>
            {
                [nameof(TabItem.Text)] = text,
                [nameof(TabItem.IsActive)] = true,
                [nameof(TabItem.ChildContent)] = new RenderFragment(builder =>
                {
                    var index = 0;
                    builder.OpenElement(index++, "div");
                    builder.AddContent(index++, Localizer["BackAddTabText", text]);
                    builder.CloseElement();
                })
            });
            return Task.CompletedTask;
        }

        private static Task Active(Tab tabset)
        {
            tabset.ActiveTab(0);
            return Task.CompletedTask;
        }

        private bool RemoveEndable => (TabSet?.Items.Count() ?? 4) < 4;

        private static Task RemoveTab(Tab tabset)
        {
            if (tabset.Items.Count() > 4)
            {
                var item = tabset.Items.Last();
                tabset.RemoveTab(item);
            }
            return Task.CompletedTask;
        }

        private Placement BindPlacement = Placement.Top;

        private void SetPlacement(Placement placement)
        {
            BindPlacement = placement;
        }

        private IEnumerable<MenuItem> GetSideMenuItems()
        {
            return new List<MenuItem>
            {
                new MenuItem() { Text = Localizer["BackText1"]  },
                new MenuItem() { Text = Localizer["BackText2"] }
            };
        }

        [NotNull]
        private Tab? TabSetMenu { get; set; }

        [NotNull]
        private Menu? TabMenu { get; set; }

        private Task OnClickMenuItem(MenuItem item)
        {
            var text = item.Text;
            var tabItem = TabSetMenu.Items.FirstOrDefault(i => i.Text == text);
            if (tabItem == null) AddTabItem(text ?? "");
            else TabSetMenu.ActiveTab(tabItem);
            return Task.CompletedTask;
        }

        private void AddTabItem(string text) => TabSetMenu.AddTab(new Dictionary<string, object?>
        {
            [nameof(TabItem.Text)] = text,
            [nameof(TabItem.IsActive)] = true,
            [nameof(TabItem.ChildContent)] = text == Localizer["BackText1"] ? BootstrapDynamicComponent.CreateComponent<Counter>().Render() : BootstrapDynamicComponent.CreateComponent<FetchData>().Render()
        });

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "IsBorderCard",
                Description = Localizer["Att1"]!,
                Type = "boolean",
                ValueList = "true/false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsCard",
                Description = Localizer["Att2"]!,
                Type = "boolean",
                ValueList = "true/false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsOnlyRenderActiveTab",
                Description = Localizer["Att3"]!,
                Type = "boolean",
                ValueList = "true/false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ShowClose",
                Description = Localizer["Att4"]!,
                Type = "boolean",
                ValueList = "true/false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ShowExtendButtons",
                Description = Localizer["Att5"]!,
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ClickTabToNavigation",
                Description = Localizer["Att6"]!,
                Type = "boolean",
                ValueList = "true/false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "Placement",
                Description = Localizer["Att7"]!,
                Type = "Placement",
                ValueList = "Top|Right|Bottom|Left",
                DefaultValue = "Top"
            },
            new AttributeItem() {
                Name = "Height",
                Description = Localizer["Att8"]!,
                Type = "int",
                ValueList = " — ",
                DefaultValue = "0"
            },
            new AttributeItem() {
                Name = "Items",
                Description = Localizer["Att9"]!,
                Type = "IEnumerable<TabItemBase>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ChildContent",
                Description = Localizer["Att10"]!,
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "AdditionalAssemblies",
                Description = Localizer["Att11"]!,
                Type = "IEnumerable<Assembly>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "OnClickTab",
                Description = Localizer["Att12"]!,
                Type = "Func<TabItem, Task>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "TabItemTextDictionary",
                Description = Localizer["Att13"]!,
                Type = "Dictionary<string, string>",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };

        /// <summary>
        /// 获得方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<MethodItem> GetMethods() => new MethodItem[]
        {
            // TODO: 移动到数据库中
            new MethodItem() {
                Name = "AddTab",
                Description = Localizer["Method1"]!,
                Parameters = "TabItem",
                ReturnValue = " — "
            },
            new MethodItem() {
                Name = "RemoveTab",
                Description = Localizer["Method2"]!,
                Parameters = "TabItem",
                ReturnValue = " — "
            },
            new MethodItem() {
                Name = "ActiveTab",
                Description = Localizer["Method3"]!,
                Parameters = "TabItem",
                ReturnValue = " — "
            },
            new MethodItem() {
                Name = "ClickPrevTab",
                Description = Localizer["Method4"]!,
                Parameters = "",
                ReturnValue = "Task"
            },
            new MethodItem() {
                Name = "ClickNextTab",
                Description = Localizer["Method5"]!,
                Parameters = "",
                ReturnValue = "Task"
            },
            new MethodItem() {
                Name = "CloseCurrentTab",
                Description = Localizer["Method6"]!,
                Parameters = "",
                ReturnValue = "Task"
            },
            new MethodItem() {
                Name = "CloseOtherTabs",
                Description = Localizer["Method7"]!,
                Parameters = "",
                ReturnValue = "Task"
            },
            new MethodItem() {
                Name = "CloseAllTabs",
                Description = Localizer["Method8"]!,
                Parameters = "",
                ReturnValue = "Task"
            },
        };
    }
}