@page "/switchs"
@inject IStringLocalizer<Switchs> Localizer

<h3>Switch</h3>

<h4>The most common switching applications are available</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">
            <Switch ValueChanged="@OnValueChanged" Value="@BindValue" OnColor="Color.Secondary" OnText="On" OffText="Off"></Switch>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Switch Value="true" OnColor="Color.Success" OnText="On" OffText="Off"></Switch>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Switch Value="true" OnColor="Color.Danger" OnText="On" OffText="Off"></Switch>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Switch Value="true" OnColor="Color.Warning" OnText="On" OffText="Off"></Switch>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Switch Value="true" OnColor="Color.Info" OnText="On" OffText="Off"></Switch>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Switch Value="true" OnColor="Color.Dark" OnText="On" OffText="Off"></Switch>
        </div>
    </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Disable the state" Introduction="Control the unavailable state of the component by setting the <code>IsDisabled</code> property" Name="Disable">
    <Switch OnColor="Color.Primary" IsDisabled="true" OnText="On" OffText="Off"></Switch>
</DemoBlock>

<DemoBlock Title="Switch color" Introduction="Set the switch status color by setting the <code>OnColor</code> <code>OffColor</code> property values" Name="Color">
    <Switch OnColor="Color.Danger" OffColor="Color.Success" OnText="On" OffText="Off"></Switch>
</DemoBlock>

<DemoBlock Title="Two-way binding" Introduction="Binding variables within a component, data is automatically synchronized" Name="Binding">
    <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 pre-<code>Label</code>, which can be customized to display the pre-label through the <code>DisplayText</code> property, or through the <code>ShowLabel</code> property turns off the display of the prelabel</p>
    <p>The pre-label explicit rules are consistent with the <code>BootstrapInput</code> component  of the <a href='inputs'>[The portal]</a></p>
    <div class="row g-3">
        <div class="col-12">
            <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="On" OffText="Off" @bind-Value="@Model.BindValue" DisplayText="An example of a two-way binding"></Switch>
        </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">
            <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="On" OffText="Off" @bind-Value="@Model.BindValue" DisplayText="Custom labels" ShowLabel="true"></Switch>
        </div>
        <Divider Text="Occupants" />
        <div class="col-12">
            <p>The value of <code>DisplayText</code> is displayed when <code>ShowLabel</code> is <code>true</code>, regardless of whether the value is set</p>
        </div>
        <div class="col-12">
            <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="On" OffText="Off" @bind-Value="@Model.BindValue" ShowLabel="true"></Switch>
        </div>
        <Divider Text="Do not occupy seats" />
        <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">
            <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="On" OffText="Off" @bind-Value="@Model.BindValue" DisplayText="Do not display" ShowLabel="false"></Switch>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Displays built-in text" Introduction="By setting <code>ShowInnerText</code> property control component displays built-in text" Name="InnerText">
    <p>By setting the <code>onInnerText</code> <code>OffInnerText</code> property to change the built-in text, a Chinese character is recommended by default to customize the component width to increase the amount of built-in text</p>
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <label class="form-label">Default text:</label>
            <Switch OnColor="Color.Primary" ShowInnerText="true" />
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <label class="form-label">Custom text:</label>
            <Switch OnColor="Color.Primary" ShowInnerText="true" OnInnerText="Be" OffInnerText="Not" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Can be an empty type switch" Introduction="Control the default value of the <code>Null</code> value by setting the <code>DefaultValueWhenNull</code> property, which is <code>false</code> when not set"  Name="Nuallable">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <NullSwitch @bind-Value="@NullValue" OnColor="Color.Dark" OnText="On" OffText="Off"></NullSwitch>
        </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.ComponentModel;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
///
/// </summary>
public sealed partial class Switchs
{
    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;

    [NotNull]
    private BlockLogger? Trace { get; set; }

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

    private bool? NullValue { get; set; }

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        // TODO: 移动到数据库中
        new AttributeItem() {
            Name = "Class",
            Description = Localizer["Class"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "Height",
            Description = Localizer["Height"],
            Type = "int",
            ValueList = "—",
            DefaultValue = "20"
        },
        new AttributeItem() {
            Name = "IsDisabled",
            Description = Localizer["IsDisabled"],
            Type = "boolean",
            ValueList = " — ",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "OffColor",
            Description = Localizer["OffColor"],
            Type = "Color",
            ValueList = " Primary / Secondary / Success / Danger / Warning / Info / Dark ",
            DefaultValue = "None"
        },
        new AttributeItem() {
            Name = "OnColor",
            Description = Localizer["OnColor"],
            Type = "Color",
            ValueList = " Primary / Secondary / Success / Danger / Warning / Info / Dark ",
            DefaultValue = "Color.Success"
        },
        new AttributeItem() {
            Name = "OnText",
            Description = Localizer["OnTextAttr"],
            Type = "string",
            ValueList = "—",
            DefaultValue = "—"
        },
        new AttributeItem() {
            Name = "OffText",
            Description = Localizer["OffTextAttr"],
            Type = "string",
            ValueList = "—",
            DefaultValue = "—"
        },
        new AttributeItem() {
            Name = "OnInnerText",
            Description = Localizer["OnInnerTextAttr"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = Localizer["OnInnerTextDefaultValue"]!
        },
        new AttributeItem() {
            Name = "OffInnerText",
            Description = Localizer["OffInnerTextAttr"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = Localizer["OffInnerTextDefaultValue"]!
        },
        new AttributeItem() {
            Name = "ShowInnerText",
            Description = Localizer["ShowInnerText"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "Width",
            Description = Localizer["Width"],
            Type = "int",
            ValueList = "—",
            DefaultValue = "40"
        },
        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 = " — "
        }
    };

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