@page "/select-trees"

<h3>SelectTree</h3>
<h4>A tree-like data structure is presented in the drop-down box for selection</h4>

<DemoBlock Title="Common usage" Introduction="Selected node" Name="Normal">
    <SelectTree TValue="TreeFoo" Items="Items" />
</DemoBlock>

<DemoBlock Title="Disabled" Introduction="Disabled the component by set <code>IsDisabled</code> to true" Name="Disable">
    <div class="row">
        <div class="col-12 col-sm-6">
            <SelectTree TValue="TreeFoo" Color="Color.Primary" Items="Items" IsDisabled="true"></SelectTree>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Select two-way binding" Introduction="The values in the text box change as you change the drop-down option by binding the Model.Name property to the component with Select Tree" Name="Binding">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <SelectTree Items="Items" @bind-Value="Model"></SelectTree>
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInput readonly @bind-Value="Model.Text" PlaceHolder="Please select ..." />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Validation" Introduction="validate the value when submit the form. Inside <code>ValidateForm</code>" Name="ClientValidation">
    <ValidateForm Model="BindModel">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <SelectTree TValue="string" @bind-Value="BindModel.Text" ShowIcon="true" Items="BindItems" />
            </div>
            <div class="col-12 col-sm-6 align-self-end">
                <Button ButtonType="ButtonType.Submit">提交</Button>
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="IsPopover" Introduction="Set <code>IsPopover</code> to <b>true</b>, use popover render UI prevent The dropdown menu cannot be fully displayed because the parent container is set to <code>overflow: hidden</code>" Name="IsPopover">
    <div class="row">
        <div class="col-12 col-sm-6 overflow-hidden">
            <SelectTree Items="Items" IsPopover="true" />
        </div>
    </div>
</DemoBlock>

// 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 partial class SelectTrees
{
    [Inject]
    [NotNull]
    private IStringLocalizer<SelectTrees>? Localizer { get; set; }

    private List<TreeViewItem<TreeFoo>> Items { get; } = TreeFoo.GetTreeItems();

    [NotNull]
    private List<TreeViewItem<string>>? BindItems { get; set; }

    [NotNull]
    private TreeFoo? Model { get; set; }

    private TreeFoo BindModel { get; set; } = new TreeFoo();

    /// <summary>
    /// <inheritdoc/>
    /// </summary>
    protected override void OnInitialized()
    {
        Model = new TreeFoo()
        {
            Text = "Sub Menu Three",
            Id = "1090",
            ParentId = "1050",
            Icon = "fa-solid fa-font-awesome",
            IsActive = true
        };

        BindItems = new List<TreeViewItem<string>>()
        {
            new TreeViewItem<string>("目录一")
            {
                Text ="目录一",
                Icon = "fa-solid fa-folder",
                ExpandIcon = "fa-solid fa-folder-open",
                Items = new List<TreeViewItem<string>>()
                {
                    new TreeViewItem<string>("子目录一")
                    {
                        Text ="子目录一",
                        Icon = "fa-solid fa-folder",
                        ExpandIcon = "fa-solid fa-folder-open",
                        Items = new List<TreeViewItem<string>>()
                        {
                            new TreeViewItem<string>("文件一") { Text = "文件一", Icon = "fa-solid fa-file", IsActive = true },
                            new TreeViewItem<string>("文件二") { Text = "文件二", Icon = "fa-solid fa-file" }
                        }
                    }
                }
            }
        };
    }
}