@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.Collections.Generic;
using System.ComponentModel;
using System.Diagnostics.CodeAnalysis;

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>"
            }
        };
    }
}