@page "/toggles"
@inject IStringLocalizer<Toggles> Localizer

<h3>Toggle</h3>

<h4>The most common switching application is available with a value of <code>true </code> <code>false </code></h4>

<DemoBlock Title="Basic usage" Introduction="Click the button to switch statuses" Name="Normal">
    <p>Click the first switch to output the log with value</p>
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Toggle Value="@BindValue" ValueChanged="@OnValueChanged" OnText="On" OffText="Off" Color="Color.Primary" />
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Toggle Value="true" OnText="On" OffText="Off" Color="Color.Secondary" />
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Toggle Value="true" OnText="On" OffText="Off" Color="Color.Success" />
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Toggle Value="true" OnText="On" OffText="Off" Color="Color.Danger" />
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Toggle Value="true" OnText="On" OffText="Off" Color="Color.Warning" />
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Toggle Value="true" OnText="On" OffText="Off" Color="Color.Info" />
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Toggle Value="true" OnText="On" OffText="Off" Color="Color.Dark" />
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Toggle Value="false" OnText="On" OffText="Off" Color="Color.Success" />
        </div>
    </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Disable the state" Introduction="The switch is not available." Name="Disable">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Toggle IsDisabled="true" Value="true" OnText="On" OffText="Off" Color="Color.Primary" />
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Toggle IsDisabled="true" Value="true" OnText="On" OffText="Off" Color="Color.Secondary" />
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Toggle IsDisabled="true" Value="true" OnText="On" OffText="Off" Color="Color.Success" />
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Toggle IsDisabled="true" Value="true" OnText="On" OffText="Off" Color="Color.Danger" />
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Toggle IsDisabled="true" Value="true" OnText="On" OffText="Off" Color="Color.Warning" />
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Toggle IsDisabled="true" Value="true" OnText="On" OffText="Off" Color="Color.Info" />
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Toggle IsDisabled="true" Value="true" OnText="On" OffText="Off" Color="Color.Dark" />
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Toggle IsDisabled="true" Value="false" OnText="On" OffText="Off" Color="Color.Success" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Bind data in both directions" Introduction="Binding variables within a component, data is automatically synchronized" Name="BindToWay">
    <p>when the <code>Switch </code> component turns on bidirectional binding, the <code>DisplayName </code> label value is automatically obtained based on the bound <code> Model </code> property value and appears as a <code> pre-Label </code>, which can be customized to display the pre-label through the <code>DispalyText </code> property, or through the <code> ShowLabel </code> property turns off the display of the prelabel</p>
    <div class="row g-3">
        <div class="col-12">
            <Toggle OnText="On" OffText="Off" @bind-Value="@Model.BindValue" DisplayText="An example of a two-way binding" />
        </div>
        <div class="col-12">
            <div>The binding value: @Model.BindValue</div>
        </div>
        <Divider Text="Custom labels" />
        <div class="col-12">
            <p>Set the <code> DisplayText </code> value to <b> custom label </b></p>
        </div>
        <div class="col-12">
            <Toggle OnText="On" OffText="Off" @bind-Value="@Model.BindValue" DisplayText="Custom labels" ShowLabel="true" />
        </div>
        <Divider Text="Occupants" />
        <div class="col-12">
            <p>The </code> value of <code> DisplayText is displayed when <code> ShowLabel </code> is <code>true </code>, regardless of whether the value is set</p>
        </div>
        <div class="col-12">
            <Toggle OnText="On" OffText="Off" @bind-Value="@Model.BindValue" ShowLabel="true" />
        </div>
        <Divider Text="Not Occupants" />
        <div class="col-12">
            <p>The value of <code> DisplayText </code> is not displayed when the <code> ShowLabel </code> is <code>false </code></p>
        </div>
        <div class="col-12">
            <Toggle OnText="On" OffText="Off" @bind-Value="@Model.BindValue" DisplayText="Do not display" ShowLabel="false" />
        </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.Shared.Common;
using BootstrapBlazor.Shared.Components;
using System.Collections.Generic;
using System.ComponentModel;

namespace BootstrapBlazor.Shared.Samples;

/// <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 BlockLogger? 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 = Localizer["ValueChanged"],
                Type = "EventCallback<bool>"
            }
    };

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Color",
                Description = Localizer["Color"],
                Type = "Color",
                ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
                DefaultValue = "Success"
            },
            new AttributeItem() {
                Name = "IsDisabled",
                Description = Localizer["IsDisabled"],
                Type = "boolean",
                ValueList = "true / false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "OffText",
                Description = Localizer["OffTextAttr"],
                Type = "string",
                ValueList = "—",
                DefaultValue = Localizer["OffTextDefautValue"]!
            },
            new AttributeItem() {
                Name = "OnText",
                Description = Localizer["OnTextAttr"],
                Type = "string",
                ValueList = "—",
                DefaultValue = Localizer["OnTextDefautValue"]!
            },
            new AttributeItem() {
                Name = "Width",
                Description = Localizer["Width"],
                Type = "int",
                ValueList = " — ",
                DefaultValue = "120"
            },
            new AttributeItem() {
                Name = "Value",
                Description = Localizer["Value"],
                Type = "boolean",
                ValueList = " ",
                DefaultValue = "None"
            },
            new AttributeItem() {
                Name = "ShowLabel",
                Description = Localizer["ShowLabel"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "DisplayText",
                Description = Localizer["DisplayText"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "OnValueChanged",
                Description = Localizer["OnValueChanged"],
                Type = "Func<bool, Task>",
                ValueList = " — ",
                DefaultValue = " — "
            }
    };
}