@page "/checkboxs"
@inject IStringLocalizer<Checkboxs> Localizer

<h3>Checkbox</h3>

<h4>Multiple-select in a set of alternatives</h4>

<DemoBlock Title="Basic usage" Introduction="Using alone can represent a switch between two states, and column head or header can represent a switch between three states when used. Components support generic data binding, setting the binding data type the <code>TValue</code>, and setting the component state by <code>State</code>" Name="Normal">
    <div class="row g-3 form-inline">
        <div class="col-12 col-sm-4">
            <Checkbox TValue="string" State="CheckboxState.Checked" OnStateChanged="@OnStateChanged" DisplayText="Selected" ShowLabel="true"></Checkbox>
        </div>
        <div class="col-12 col-sm-4">
            <Checkbox TValue="string" State="CheckboxState.UnChecked" OnStateChanged="@OnStateChanged" DisplayText="Not selected" ShowLabel="true"></Checkbox>
        </div>
        <div class="col-12 col-sm-4">
            <Checkbox TValue="string" State="CheckboxState.Indeterminate" OnStateChanged="@OnStateChanged" DisplayText="Indeterminate" ShowLabel="true"></Checkbox>
        </div>
    </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Disable the check box" Introduction="Check box is not available, and the <code>IsDisabled</code> is set by whether the component is available" Name="Disabled">
    <div class="row g-3 form-inline">
        <div class="col-12 col-sm-4">
            <Checkbox TValue="string" State="CheckboxState.Checked" IsDisabled="true" DisplayText="Selected" ShowLabel="true"></Checkbox>
        </div>
        <div class="col-12 col-sm-4">
            <Checkbox TValue="string" State="CheckboxState.UnChecked" IsDisabled="true" DisplayText="Not selected" ShowLabel="true"></Checkbox>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Color" Introduction="Change the component background color by setting the <code>Color</code> property" Name="ShowLabel">
    <div class="row g-3 form-inline">
        <div class="col-12 col-md-4">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Selected" ShowLabel="true" Color="@Color.Primary"></Checkbox>
        </div>
        <div class="col-12 col-md-4">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Selected" ShowLabel="true" Color="@Color.Success"></Checkbox>
        </div>
        <div class="col-12 col-md-4">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Selected" ShowLabel="true" Color="@Color.Danger"></Checkbox>
        </div>
        <div class="col-12 col-md-4">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Selected" ShowLabel="true" Color="@Color.Info"></Checkbox>
        </div>
        <div class="col-12 col-md-4">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Selected" ShowLabel="true" Color="@Color.Warning"></Checkbox>
        </div>
        <div class="col-12 col-md-4">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Selected" ShowLabel="true" Color="@Color.Dark"></Checkbox>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Size" Introduction="Change the component size by setting the <code>Size</code> property" Name="DisplayText">
    <div class="row g-3 form-inline">
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Default" ShowLabel="true"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Small" ShowLabel="true" Size="Size.Small"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Medium" ShowLabel="true" Size="Size.Medium"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Large" ShowLabel="true" Size="Size.Large"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="ExtraLarge" ShowLabel="true" Size="Size.ExtraLarge"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="ExtraExtraLarge" ShowLabel="true" Size="Size.ExtraExtraLarge"></Checkbox>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Label text" Introduction="The check box displays text, and the component status flips when you tap display text, using the <code>DisplayText</code> settings component to display text" Name="ShowAfterLabel">
    <p>Set <code>DisplayText</code> property, or display text messages through bidirectional binding</p>
    <div class="row g-3 form-inline">
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Default" ShowAfterLabel="true"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Small" ShowAfterLabel="true" Size="Size.Small"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Medium" ShowAfterLabel="true" Size="Size.Medium"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="Large" ShowAfterLabel="true" Size="Size.Large"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="ExtraLarge" ShowAfterLabel="true" Size="Size.ExtraLarge"></Checkbox>
        </div>
        <div class="col-12 col-md-3">
            <Checkbox TValue="string" State="CheckboxState.Checked" DisplayText="ExtraExtraLarge" ShowAfterLabel="true" Size="Size.ExtraExtraLarge"></Checkbox>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Two-way binding boolean" Introduction="Binding variables within a component, data automatically synchronized, binding data types <code>boolean</code> type when the value is automatically flipped" Name="OnStateChanged">
    <div class="row g-3 form-inline">
        <div class="col-12">
            <Checkbox DisplayText="Two-way binding" ShowLabel="true" @bind-Value="@BindValue" OnStateChanged="@OnItemChanged"></Checkbox>
        </div>
        <div class="col-12">
            <BootstrapInput @bind-Value="@BindValue" IsDisabled="true"></BootstrapInput>
        </div>
    </div>
    <BlockLogger @ref="BinderLog" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Bind string data in both directions" Introduction="Binding variables within a component, data is automatically synchronized" Name="BindString">
    <div class="row g-3 form-inline">
        <div class="col-12">
            <Checkbox DisplayText="Two-way binding" ShowLabel="true" @bind-Value="@BindString" OnStateChanged="@OnItemChangedString"></Checkbox>
        </div>
        <div class="col-12">
            <BootstrapInput @bind-Value="@BindString"></BootstrapInput>
        </div>
    </div>
    <BlockLogger @ref="BinderLog" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Used in forms" Introduction="When you use <code>Checkbox</code> in a form, the display label text is placed in front of the component" Name="ValidateForm">
    <p>The pre-label explicit rules are consistent with the <code>BootstrapInput</code> component <a href='inputs'>[portal]</a></p>
    <ValidateForm Model="@Model">
        <div class="row g-3 form-inline">
            <div class="col-12 col-sm-6">
                <Checkbox @bind-Value="@Model.BindValue" ShowLabel="true"></Checkbox>
            </div>
            <div class="col-12 col-sm-6">
                <Checkbox @bind-Value="@Model.BindValue1" ShowLabel="true" DisplayText="Handwritten labels"></Checkbox>
            </div>
        </div>
    </ValidateForm>
</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 System.ComponentModel;

namespace BootstrapBlazor.Shared.Samples;

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

        [DisplayName("标签文字2")]
        public bool BindValue1 { get; set; }
    }

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

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

    /// <summary>
    /// 
    /// </summary>
    private BlockLogger? 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 = Localizer["Att1"],
                    Type = "bool",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "ShowAfterLabel",
                    Description = Localizer["Att2"],
                    Type = "bool",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "DisplayText",
                    Description = Localizer["Att3"],
                    Type = "string",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem(){
                    Name = "IsDisabled",
                    Description = Localizer["Att4"],
                    Type = "boolean",
                    ValueList = "true / false",
                    DefaultValue = "false"
                },
                new AttributeItem()
                {
                    Name = "State",
                    Description = Localizer["Att5"],
                    Type = "CheckboxState",
                    ValueList = "Mixed / Checked / UnChecked",
                    DefaultValue = "UnChecked"
                },
        };
    }

    /// <summary>
    /// 获得事件方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<EventItem> GetEvents() => new EventItem[]
    {
            new EventItem()
            {
                Name = "OnStateChanged",
                Description = Localizer["Event1"],
                Type ="Action<CheckboxState, TItem>"
            },
            new EventItem()
            {
                Name = "StateChanged",
                Description = Localizer["Event2"],
                Type ="EventCallback<CheckboxState>"
            }
    };
}