@page "/toggles"

<h3>Toggle 开关</h3>

<h4>提供最普通的开关应用，值为 <code>true</code> <code>false</code></h4>

<Block Title="基础用法" Introduction="点击按钮切换状态">
    <p>点击第一个开关有值输出日志</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle Value="@BindValue" ValueChanged="@OnValueChanged" OnText="开启" OffText="关闭" Color="Color.Primary"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Secondary"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Success"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Danger"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Warning"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Info"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle Value="true" OnText="开启" OffText="关闭" Color="Color.Dark"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle Value="false" OnText="开启" OffText="关闭" Color="Color.Success"></Toggle>
            </div>
        </div>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="禁用状态" Introduction="开关不可用状态。">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Primary"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Secondary"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Success"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Danger"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Warning"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Info"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle IsDisabled="true" Value="true" OnText="开启" OffText="关闭" Color="Color.Dark"></Toggle>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Toggle IsDisabled="true" Value="false" OnText="开启" OffText="关闭" Color="Color.Success"></Toggle>
            </div>
        </div>
    </div>
</Block>

<Block Title="双向绑定数据" Introduction="绑定组件内变量，数据自动同步">
    <p><code>Switch</code> 组件开启双向绑定时，会根据绑定的 <code>Model</code> 属性值去自动获取 <code>DisplayName</code> 标签值并且显示为前置 <code>Label</code>，通过 <code>DisplayText</code> 属性可以自定义显示前置标签，或者通过 <code>ShowLabel</code> 属性关闭前置标签是否显示</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Toggle OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="双向绑定示例"></Toggle>
            </div>
            <div class="form-group col-12">
                <div>绑定数值: @Model.BindValue</div>
            </div>
            <Divider Text="自定义标签" />
            <div class="form-group col-12">
                <p>设置 <code>DisplayText</code> 值为 <b>自定义标签</b></p>
            </div>
            <div class="form-group col-12">
                <Toggle OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="自定义标签" ShowLabel="true"></Toggle>
            </div>
            <Divider Text="占位" />
            <div class="form-group col-12">
                <p>无论是否设置 <code>DisplayText</code> 值，当 <code>ShowLabel</code> 为 <code>true</code> 时均显示</p>
            </div>
            <div class="form-group col-12">
                <Toggle OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" ShowLabel="true"></Toggle>
            </div>
            <Divider Text="不占位" />
            <div class="form-group col-12">
                <p>无论是否设置 <code>DisplayText</code> 值，当 <code>ShowLabel</code> 为 <code>false</code> 时均不显示</p>
            </div>
            <div class="form-group col-12">
                <Toggle OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="不显示" ShowLabel="false"></Toggle>
            </div>
        </div>
    </div>
</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.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using System.Collections.Generic;
using System.ComponentModel;

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

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

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

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

        /// <summary>
        ///
        /// </summary>
        /// <param name="val"></param>
        private void OnValueChanged(bool val)
        {
            BindValue = val;
            Trace?.Log($"Toggle CurrentValue: {val}");
        }

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "ValueChanged",
                Description="获取选择改变的值",
                Type ="EventCallback<bool>"
            }
        };

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Color",
                Description = "颜色",
                Type = "Color",
                ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
                DefaultValue = "Success"
            },
            new AttributeItem() {
                Name = "IsDisabled",
                Description = "是否禁用",
                Type = "boolean",
                ValueList = "true / false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "OffText",
                Description = "组件 Off 时显示文本",
                Type = "string",
                ValueList = "—",
                DefaultValue = "收缩"
            },
            new AttributeItem() {
                Name = "OnText",
                Description = "组件 On 时显示文本",
                Type = "string",
                ValueList = "—",
                DefaultValue = "展开"
            },
            new AttributeItem() {
                Name = "Width",
                Description = "组件宽度",
                Type = "int",
                ValueList = " — ",
                DefaultValue = "120"
            },
            new AttributeItem() {
                Name = "Value",
                Description = "获取值",
                Type = "boolean",
                ValueList = " ",
                DefaultValue = "None"
            },
            new AttributeItem() {
                Name = "ShowLabel",
                Description = "是否显示前置标签",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "DisplayText",
                Description = "前置标签显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "OnValueChanged",
                Description = "值发生改变时回调委托方法",
                Type = "Func<bool, Task>",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
    }
}