@page "/checkboxs"

<h3>Checkbox 多选框</h3>

<h4>一组备选项中进行多选</h4>

<Block Title="基础用法" Introduction="单独使用可以表示两种状态之间的切换，列头或者表头使用时可以表示三种状态之间的切换。组件支持泛型数据绑定，通过 <code>TValue</code> 设置绑定数据类型，通过 <code>State</code> 设置组件状态">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Checkbox TValue="string" State="CheckboxState.Checked" OnStateChanged="@OnStateChanged" DisplayText="选中" ShowLabel="true"></Checkbox>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Checkbox TValue="string" State="CheckboxState.UnChecked" OnStateChanged="@OnStateChanged" DisplayText="未选" ShowLabel="true"></Checkbox>
            </div>
        </div>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="禁用复选框" Introduction="复选框不可用状态，通过 <code>IsDisabled</code> 设置组件是否可用">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-md-4">
                <Checkbox TValue="string" State="CheckboxState.Checked" IsDisabled="true" DisplayText="选中" ShowLabel="true"></Checkbox>
            </div>
            <div class="form-group col-12 col-md-4">
                <Checkbox TValue="string" State="CheckboxState.UnChecked" IsDisabled="true" DisplayText="未选" ShowLabel="true"></Checkbox>
            </div>
        </div>
    </div>
</Block>

<Block Title="Label 文字" Introduction="复选框显示文字，通过 <code>DisplayText</code> 设置组件显示文本，点击显示文字时组件状态也会进行翻转">
    <p>设置<code>DisplayText</code> 属性，或者通过双向绑定均可以显示文本信息</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Checkbox TValue="string" DisplayText="显示文字" ShowAfterLabel="true"></Checkbox>
            </div>
        </div>
    </div>
</Block>

<Block Title="双向绑定 boolean 数据" Introduction="绑定组件内变量，数据自动同步，绑定数据类型为 <code>boolean</code> 类型时自动翻转值">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Checkbox DisplayText="双向绑定" ShowLabel="true" @bind-Value="@BindValue" OnStateChanged="@OnItemChanged"></Checkbox>
            </div>
            <div class="form-group col-12">
                <BootstrapInput @bind-Value="@BindValue" IsDisabled="true"></BootstrapInput>
            </div>
        </div>
    </div>
    <Logger @ref="BinderLog" class="mt-3" />
</Block>

<Block Title="双向绑定 string 数据" Introduction="绑定组件内变量，数据自动同步">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Checkbox DisplayText="双向绑定" ShowLabel="true" @bind-Value="@BindString" OnStateChanged="@OnItemChangedString"></Checkbox>
            </div>
            <div class="form-group col-12">
                <BootstrapInput @bind-Value="@BindString"></BootstrapInput>
            </div>
        </div>
    </div>
    <Logger @ref="BinderLog" class="mt-3" />
</Block>

<Block Title="表单中使用" Introduction="在表单中使用 <code>Checkbox</code> 时，显示标签文字会放置到组件前面">
    <p>前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href="inputs">[传送门]</a></p>
    <ValidateForm class="form-inline" Model="@Model">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Checkbox @bind-Value="@Model.BindValue" ShowLabel="true"></Checkbox>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Checkbox @bind-Value="@Model.BindValue" ShowLabel="true" DisplayText="手写标签"></Checkbox>
            </div>
        </div>
    </ValidateForm>
</Block>

<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.Pages.Components;
using System.Collections.Generic;
using System.ComponentModel;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Checkboxs
    {
        private class Foo
        {
            [DisplayName("标签文字")]
            public bool BindValue { get; set; }
        }

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

        /// <summary>
        /// 
        /// </summary>
        private Logger? Trace { get; set; }

        /// <summary>
        /// 
        /// </summary>
        private Logger? BinderLog { get; set; }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="state"></param>
        /// <param name="value"></param>
        private Task OnStateChanged(CheckboxState state, string value)
        {
            Trace?.Log($"Checkbox state changed State: {state}");
            return Task.CompletedTask;
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="state"></param>
        /// <param name="value"></param>
        private Task OnItemChanged(CheckboxState state, bool value)
        {
            BinderLog?.Log($"CheckboxState: {state} - Bind Value: {value}");
            return Task.CompletedTask;
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="state"></param>
        /// <param name="value"></param>
        private Task OnItemChangedString(CheckboxState state, string value)
        {
            BinderLog?.Log($"CheckboxState: {state} - Bind Value: {value}");
            return Task.CompletedTask;
        }

        /// <summary>
        /// 
        /// </summary>
        private string BindString { get; set; } = "我爱 Blazor";

        /// <summary>
        /// 
        /// </summary>
        private bool BindValue { get; set; }

        /// <summary>
        /// 
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes()
        {
            return new AttributeItem[]
            {
                new AttributeItem() {
                    Name = "ShowLabel",
                    Description = "是否显示前置标签",
                    Type = "bool",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "ShowAfterLabel",
                    Description = "是否显示后置标签",
                    Type = "bool",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "DisplayText",
                    Description = "前置标签显示文本",
                    Type = "string",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem(){
                    Name = "IsDisabled",
                    Description = "是否禁用",
                    Type = "boolean",
                    ValueList = "true / false",
                    DefaultValue = "false"
                },
                new AttributeItem()
                {
                    Name = "State",
                    Description = "控件类型",
                    Type = "CheckboxState",
                    ValueList = "Mixed / Checked / UnChecked",
                    DefaultValue = "UnChecked"
                },
            };
        }

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "OnStateChanged",
                Description="选择框状态改变时回调此方法",
                Type ="Action<CheckboxState, TItem>"
            },
            new EventItem()
            {
                Name = "StateChanged",
                Description="State 状态改变回调方法",
                Type ="EventCallback<CheckboxState>"
            }
        };
    }
}