@page "/multiselects"
@inject IStringLocalizer<MultiSelects> Localizer

<h3>MultiSelect</h3>

<h4>When you have multiple options, use the drop-down menu to present and provide a search for multiple choices</h4>

<DemoBlock Title="Color" Introduction="Multi-select drop-down boxes in a variety of colors are available" Name="Color">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect Color="Color.Primary" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect Color="Color.Success" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect Color="Color.Danger" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect Color="Color.Warning" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect Color="Color.Info" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect Color="Color.Secondary" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect Color="Color.Dark" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="A two-way binding value string" Introduction="Bind a comma string-splitting string" Name="BindingString">
    <p>
        <div>The <code>mutltiSelect</code> component data source <code>Items</code> and <b>selected values</b> the <code>SelectItemsValue</code> support bidirectional binding;In this example, the <code>SelectItemsValue</code> variable by binding bidirectionally, and chooses to change its value through the drop-down box. </div>
    </p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect Items="@Items4" @bind-Value="@SelectedItemsValue"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <Button Icon="fa fa-plus" Text="Add" OnClick="@AddItems" class="me-1"></Button>
            <Button Icon="fa fa-minus" Text="Decrease" OnClick="@RemoveItems"></Button>
            <Button Icon="fa fa-trash-o" Text="Clear" OnClick="@ClearItems"></Button>
        </div>
    </div>
    <div class="mt-3">@SelectedItemsValue</div>
</DemoBlock>

<DemoBlock Title="A collection of bidirectional binding values" Introduction="Bind a generic <code>a collection of IEnumerable<T></code>" Name="BindingCollection">
    <p>In this example, the <code>SelectArrayValues</code> collection variable by binding bidirectionally, and selects to change its value through the drop-down box</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect Items="@Items5" @bind-Value="@SelectedArrayValues"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <Button Icon="fa fa-plus" Text="Add" OnClick="@AddListItems" class="me-1"></Button>
            <Button Icon="fa fa-minus" Text="Decrease" OnClick="@RemoveListItems"></Button>
            <Button Icon="fa fa-trash-o" Text="Clear" OnClick="@ClearListItems"></Button>
        </div>
    </div>
    <div class="mt-3">@(string.Join(",", SelectedArrayValues))</div>
</DemoBlock>

<DemoBlock Title="An array of two-way bound values" Introduction="Bind an array <code>int[]</code>" Name="BindingNumber">
    <p>In this example, an array variable <code>SelectedIntArrayValues</code>  selected by a bidirectional binding, selects to change its value through a drop-down box</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect Items="@LongItems" @bind-Value="@SelectedIntArrayValues"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <Button Icon="fa fa-plus" Text="Add" OnClick="@AddArrayItems" class="me-1"></Button>
            <Button Icon="fa fa-minus" Text="Decrease" OnClick="@RemoveArrayItems"></Button>
            <Button Icon="fa fa-trash-o" Text="Clear" OnClick="@ClearArrayItems"></Button>
        </div>
    </div>
    <div class="mt-3">@(string.Join(",", SelectedIntArrayValues))</div>
</DemoBlock>

<DemoBlock Title="Bidirectional binding enumerates the collection" Introduction="Bind a generic a collection of <code>IEnumerable<Enum></code>" Name="BindingEnumCollection">
    <p>In this example, by binding <code>SelectEnumValues</code> collection variables in both directions, you choose to change their values through the drop-down box, <b>and you do not need to set the <code>Items</code> parameter when enumerating</b>type, the added feature is that the component tries to find resource files or <code>DisplayAttribute</code> And <code>DescriptionAttribute</code> labels attempt local translation, such as this example when switching to <b>Chinese</b> enumerates the values <b>elementary school</b><b>middle school </b></p>
    <MultiSelect @bind-Value="@SelectedEnumValues"></MultiSelect>
    <div class="mt-3">@(string.Join(",", SelectedEnumValues))</div>
</DemoBlock>

<DemoBlock Title="Search function" Introduction="Turn on search by setting the <code>ShowSearch</code> value" Name="Search">
    <p>In this example, the search callback delegate method is set <code>onSearchTextChanged</code> to customize search results if the display text is used internally to make a fuzzy match when not set</p>
    <MultiSelect Items="@Items6" @bind-Value="@SelectedItemsValue6" ShowSearch="true" OnSearchTextChanged="@OnSearch"></MultiSelect>
    <div class="mt-3">@SelectedItemsValue6</div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Grouping" Introduction="Alternatives are presented in groups" Name="Group">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Items="GroupItems" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Disable the feature" Introduction="Set the component disabled state by setting the <code>IsDisabled</code> value" Name="Disable">
    <p>The component does not respond when the state is disabled</p>
    <MultiSelect Items="@Items7" Value="@SelectedItemsValue7" IsDisabled="true" />
</DemoBlock>

<DemoBlock Title="Events when the option changes" Introduction="Get the currently selected data set change event by setting the <code>onSelectedItemsChanged</code> callback method by setting" Name="OptionChange">
    <MultiSelect Items="@Items8" OnSelectedItemsChanged="@OnSelectedItemsChanged8" Value="@SelectedItemsValue8" />
    <BlockLogger @ref="Trace2" />
</DemoBlock>

<DemoBlock Title="Client validation" Introduction="When the drop-down box is not selected, it is blocked when the submit button is clicked." Name="ClientValidation">
    <p>When built into the <code>ValidateForm</code> component, client authentication is automatically turned on, and the binding model has <code>Required</code> tags</p>
    <ValidateForm Model="@Model">
        <div class="row g-3">
            <div class="col-12 col-sm-8">
                <MultiSelect Items="Items8" @bind-Value="@Model.Address" />
            </div>
            <div class="col-12 col-sm-4 align-self-end">
                <Button ButtonType="ButtonType.Submit">Submit</Button>
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="The label is displayed" Introduction="When a component binds in both directions, it automatically determines whether label text is displayed based on the conditions" Name="DispalyLabel">
    <p>The pre-label explicit rules are consistent with the <code>BootstrapInput</code> component of the of the <a href='inputs'>[The portal]</a></p>
    <Divider Text="Bidirectional binding displays labels" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <ValidateForm Model="@Foo">
        <div class="row g-3">
            <div class="col-12">
                <MultiSelect Color="Color.Primary" Items="@Items9" @bind-Value="@Foo.Name" />
            </div>
        </div>
    </ValidateForm>
    <Divider Text="Bidirectional bindings do not display labels" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <MultiSelect Color="Color.Primary" Items="@Items10" @bind-Value="@Foo.Name" />
    <Divider Text="Customize DisplayText" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <MultiSelect Color="Color.Primary" Items="@Items11" @bind-Value="@Foo.Name" DisplayText="Custom name" ShowLabel="true" />
</DemoBlock>

<DemoBlock Title="Options for extra-long text" Introduction="The candidate text is particularly long" Name="VeryLongText">
    <div style="max-width: 400px">
        <MultiSelect Items="@LongItems1" @bind-Value="@SelectedLongItemsValue1" DisplayText="Extra long text" ShowLabel="true"></MultiSelect>
    </div>
</DemoBlock>

<DemoBlock Title="Full and reverse buttons" Introduction="By setting <code>ShowSelectAllButton</code> value settings component displays the All and Anti buttons" Name="Button">
    <div style="max-width: 400px">
        <MultiSelect Items="@LongItems2" @bind-Value="@SelectedLongItemsValue2" ShowToolbar="true" ShowSearch="true"></MultiSelect>
        <p>@SelectedLongItemsValue2</p>
    </div>
</DemoBlock>

<DemoBlock Title="Set the maximum and minimum number of options" Introduction="Set the limit on the number of options available to components by setting the <code>max</code> <code>Min</code> values" Name="MaxMin">
    <div style="max-width: 300px">
        <p>You can select up to two options</p>
        <MultiSelect Items="@LongItems3" @bind-Value="@SelectedMaxItemsValue" Max="2"></MultiSelect>
    </div>
    <div style="max-width: 300px" class="mt-3">
        <p>Select at least two options</p>
        <MultiSelect Items="@LongItems4" @bind-Value="@SelectedMinItemsValue" Min="2"></MultiSelect>
    </div>
</DemoBlock>

<DemoBlock Title="Extend the toolbar button" Introduction="Customize features by setting <code>ButtonTemplate</code> custom toolbar buttons" Name="ExpandButton">
    <div style="max-width: 300px">
        <MultiSelect Items="@LongItems5" @bind-Value="@SelectedLongItemsValue3" ShowToolbar="true" ShowDefaultButtons="false">
            <ButtonTemplate>
                <button class="btn" @onclick="@OnClickButton">Test</button>
            </ButtonTemplate>
        </MultiSelect>
    </div>
</DemoBlock>

<DemoBlock Title="Cascading bindings" Introduction="The second drop-down box dynamically populates the content by selecting the different options for the first drop-down box." Name="Cascading">
    <p>In this example, clicking on the first drop-down box allows you to get the data source for the second multi-box by asynchronous means, and after assigning, call <code>StateHasChanged</code> to re-render the <b>multi-box </b></p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="@Items3" OnSelectedItemChanged="@OnCascadeBindSelectClick" />
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Items="@Items2" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Item Template" Introduction="customer item template by set <code>ItemTemplate</code>" Name="ItemTemplate">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Items="@TemplateItems">
                <ItemTemplate>
                    <div class="mul-select-item">
                        <i class="fa fa-fa"></i>
                        <span>@context.Text</span>
                        <i class="fa fa-fa"></i>
                    </div>
                </ItemTemplate>
            </MultiSelect>
        </div>
    </div>
</DemoBlock>

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

<EventTable Items="@GetEvents()" />

// 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.Components;

namespace BootstrapBlazor.Shared.Samples;

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

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

    [NotNull]
    private List<SelectedItem>? DataSource { get; set; }

    [NotNull]
    private List<SelectedItem>? LongDataSource { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        // 初始化数据
        DataSource = new List<SelectedItem>
        {
            new SelectedItem ("Beijing", "北京"),
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Guangzhou", "广州")
        };

        LongDataSource = new List<SelectedItem>
        {
            new SelectedItem ("1", "特别甜的东瓜(特别甜的东瓜)"),
            new SelectedItem ("2", "特别甜的西瓜(特别甜的西瓜)"),
            new SelectedItem ("3", "特别甜的南瓜(特别甜的南瓜)"),
            new SelectedItem ("4", "特别甜的傻瓜(特别甜的傻瓜)"),
            new SelectedItem ("5", "特别甜的金瓜(特别甜的金瓜)"),
            new SelectedItem ("6", "特别甜的木瓜(特别甜的木瓜)"),
            new SelectedItem ("7", "特别甜的水瓜(特别甜的水瓜)"),
            new SelectedItem ("8", "特别甜的火瓜(特别甜的火瓜)"),
            new SelectedItem ("9", "特别甜的土瓜(特别甜的土瓜)"),
        };

        Items4 = GenerateDataSource(DataSource);
        Items5 = GenerateDataSource(DataSource);
        Items6 = GenerateDataSource(DataSource);
        Items7 = GenerateDataSource(DataSource);
        Items8 = GenerateDataSource(DataSource);
        Items9 = GenerateDataSource(DataSource);
        Items10 = GenerateDataSource(DataSource);
        Items11 = GenerateDataSource(DataSource);

        LongItems = GenerateDataSource(LongDataSource);
        LongItems1 = GenerateDataSource(LongDataSource);
        LongItems2 = GenerateDataSource(LongDataSource);
        LongItems3 = GenerateDataSource(LongDataSource);
        LongItems4 = GenerateDataSource(LongDataSource);
        LongItems5 = GenerateDataSource(LongDataSource);
    }

    private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();

    /// <summary>
    /// 级联绑定菜单
    /// </summary>
    /// <param name="item"></param>
    private async Task OnCascadeBindSelectClick(SelectedItem item)
    {
        // 模拟异步获取数据源
        await Task.Delay(100);
        if (item.Value == "Beijing")
        {
            Items2 = new List<SelectedItem>(new[]
            {
                new SelectedItem("1","朝阳区") { Active = true },
                new SelectedItem("2","海淀区")
            });
        }
        else if (item.Value == "Shanghai")
        {
            Items2 = new List<SelectedItem>(new[]
            {
                new SelectedItem("1","静安区"),
                new SelectedItem("2","黄浦区") {Active = true },
            });
        }
        else
        {
            Items2 = new List<SelectedItem>();
        }
        StateHasChanged();
    }

    private void AddItems()
    {
        SelectedItemsValue = "Beijing,Shanghai,Guangzhou";
    }

    private void RemoveItems()
    {
        SelectedItemsValue = "Beijing";
    }

    private void ClearItems()
    {
        SelectedItemsValue = "";
    }

    private void AddListItems()
    {
        SelectedArrayValues = "Beijing,Shanghai".Split(',');
    }

    private void RemoveListItems()
    {
        SelectedArrayValues = new[] { "Beijing" };
    }

    private void ClearListItems()
    {
        SelectedArrayValues = Enumerable.Empty<string>();
    }

    private void AddArrayItems()
    {
        SelectedIntArrayValues = new[] { 1, 2, 3, 4 };
    }

    private void RemoveArrayItems()
    {
        SelectedIntArrayValues = new[] { 1, 2, };
    }

    private void ClearArrayItems()
    {
        SelectedIntArrayValues = Array.Empty<int>();
    }

    private int[] SelectedIntArrayValues { get; set; } = Array.Empty<int>();
    private IEnumerable<string> SelectedArrayValues { get; set; } = Enumerable.Empty<string>();
    private IEnumerable<EnumEducation> SelectedEnumValues { get; set; } = new List<EnumEducation> { EnumEducation.Middle, EnumEducation.Primary };

    private IEnumerable<SelectedItem> OnSearch(string searchText)
    {
        Trace.Log($"{Localizer["Log1"]}：{searchText}");
        return Items.Where(i => i.Text.Contains(searchText, System.StringComparison.OrdinalIgnoreCase));
    }

    private Task OnSelectedItemsChanged8(IEnumerable<SelectedItem> items)
    {
        Trace2.Log($"选中项集合：{string.Join(",", items.Select(i => i.Value))}");
        return Task.CompletedTask;
    }

    private Foo Model { get; set; } = new Foo();

    private Foo Foo { get; set; } = new Foo();

    private static void OnClickButton()
    {

    }

    private string SelectedLongItemsValue1 { get; set; } = "";

    private string SelectedLongItemsValue2 { get; set; } = "";

    private string SelectedLongItemsValue3 { get; set; } = "";

    private string SelectedMaxItemsValue { get; set; } = "";

    private string SelectedMinItemsValue { get; set; } = "";

    private string SelectedItemsValue { get; set; } = "Beijing";

    private string SelectedItemsValue6 { get; set; } = "Beijing";

    private string SelectedItemsValue7 { get; set; } = "Beijing";

    private string SelectedItemsValue8 { get; set; } = "Beijing";

    private IEnumerable<SelectedItem> Items { get; set; } = new[]
    {
        new SelectedItem ("Beijing", "北京"),
        new SelectedItem ("Shanghai", "上海"),
        new SelectedItem ("Guangzhou", "广州"),
        new SelectedItem ("Shenzhen", "深圳"),
        new SelectedItem ("Chengdu", "成都"),
        new SelectedItem ("Wuhan", "武汉"),
        new SelectedItem ("Dalian", "大连"),
        new SelectedItem ("Hangzhou", "杭州"),
        new SelectedItem ("Lianyungang", "连云港")
    };

    private IEnumerable<SelectedItem> TemplateItems { get; set; } = new[]
    {
        new SelectedItem ("Beijing", "北京"),
        new SelectedItem ("Shanghai", "上海"),
        new SelectedItem ("Guangzhou", "广州"),
        new SelectedItem ("Shenzhen", "深圳"),
        new SelectedItem ("Chengdu", "成都"),
        new SelectedItem ("Wuhan", "武汉"),
        new SelectedItem ("Dalian", "大连"),
        new SelectedItem ("Hangzhou", "杭州"),
        new SelectedItem ("Lianyungang", "连云港")
    };

    private IEnumerable<SelectedItem> GroupItems { get; } = new SelectedItem[]
    {
        new SelectedItem ("Jilin", "吉林") { GroupName = "东北"},
        new SelectedItem ("Liaoning", "辽宁") {GroupName = "东北", Active = true },
        new SelectedItem ("Beijing", "北京") { GroupName = "华中"},
        new SelectedItem ("Shijiazhuang", "石家庄") { GroupName = "华中"},
        new SelectedItem ("Shanghai", "上海") {GroupName = "华东", Active = true },
        new SelectedItem ("Ningbo", "宁波") {GroupName = "华东", Active = true }
    };

    private List<SelectedItem> Items2 { get; set; } = new List<SelectedItem>();

    private readonly List<SelectedItem> Items3 = new SelectedItem[]
    {
        new SelectedItem ("", "请选择 ..."),
        new SelectedItem ("Beijing", "北京") { Active = true },
        new SelectedItem ("Shanghai", "上海"),
        new SelectedItem ("Hangzhou", "杭州")
    }.ToList();

    [NotNull]
    private List<SelectedItem>? Items4 { get; set; }

    [NotNull]
    private List<SelectedItem>? Items5 { get; set; }

    [NotNull]
    private List<SelectedItem>? Items6 { get; set; }

    [NotNull]
    private List<SelectedItem>? Items7 { get; set; }

    [NotNull]
    private List<SelectedItem>? Items8 { get; set; }

    [NotNull]
    private List<SelectedItem>? Items9 { get; set; }

    [NotNull]
    private List<SelectedItem>? Items10 { get; set; }

    [NotNull]
    private List<SelectedItem>? Items11 { get; set; }

    [NotNull]
    private List<SelectedItem>? LongItems { get; set; }

    [NotNull]
    private List<SelectedItem>? LongItems1 { get; set; }

    [NotNull]
    private List<SelectedItem>? LongItems2 { get; set; }

    [NotNull]
    private List<SelectedItem>? LongItems3 { get; set; }

    [NotNull]
    private List<SelectedItem>? LongItems4 { get; set; }

    [NotNull]
    private List<SelectedItem>? LongItems5 { get; set; }

    /// <summary>
    /// 获得事件方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<EventItem> GetEvents() => new[]
    {
        new EventItem()
        {
            Name = "OnSelectedItemsChanged",
            Description = Localizer["Event1"],
            Type = "Func<SelectedItem, Task>"
        },
        new EventItem()
        {
            Name = "OnSearchTextChanged",
            Description = Localizer["Event2"],
            Type = "Func<string, IEnumerable<SelectedItem>>"
        }
    };

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new[]
    {
        // TODO: 移动到数据库中
        new AttributeItem()
        {
            Name = "ShowLabel",
            Description = Localizer["Att1"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem()
        {
            Name = "ShowCloseButton",
            Description = Localizer["Att2"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem()
        {
            Name = "ShowToolbar",
            Description = Localizer["Att3"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem()
        {
            Name = "ShowDefaultButtons",
            Description = Localizer["Att4"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem()
        {
            Name = "DisplayText",
            Description = Localizer["Att5"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem()
        {
            Name = "PlaceHolder",
            Description = Localizer["Att6"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = Localizer["Att1DefaultValue"]!
        },
        new AttributeItem()
        {
            Name = "Class",
            Description = Localizer["Att7"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem()
        {
            Name = "Color",
            Description = Localizer["Att8"],
            Type = "Color",
            ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
            DefaultValue = "Primary"
        },
        new AttributeItem()
        {
            Name = "IsDisabled",
            Description = Localizer["Att9"],
            Type = "boolean",
            ValueList = "true / false",
            DefaultValue = "false"
        },
        new AttributeItem()
        {
            Name = "Items",
            Description = Localizer["Att10"],
            Type = "IEnumerable<SelectedItem>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem()
        {
            Name = "ButtonTemplate",
            Description = Localizer["Att11"],
            Type = "RenderFragment<IEnumerable<SelectedItem>>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem()
        {
            Name = "ItemTemplate",
            Description = Localizer["ItemTemplate"],
            Type = "RenderFragment<SelectedItem>",
            ValueList = " — ",
            DefaultValue = " — "
        }
    };
}