@page "/buttons"
@inject IStringLocalizer<Buttons> Localizer

<h3>Button</h3>

<h4>Common action buttons.</h4>

<DemoBlock Title="Basic usage" Introduction="The underlying button usage." Name="Normal">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Primary">Primary</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Secondary">Secondary</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Success">Success</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Danger">Danger</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Warning">Warning</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Info">Information</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Dark">Dark</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Light">Highlight</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button OnClick="@ButtonClick" Color="Color.Link">Link</Button></div>
    </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Different styles" Introduction="Display different button styles by setting the <code>ButtonStyle</code>" Name="Round">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Primary">Primary</Button>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Secondary">Secondary</Button>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Success">Success</Button>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Danger">Danger</Button>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button ButtonStyle="ButtonStyle.Round" Color="Color.Warning">Warning</Button>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
            <Button ButtonStyle="ButtonStyle.Circle" Icon="fa fa-fw fa-cubes">
            </Button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Outline" Introduction='Set the color style of the button border by setting the <code>IsOutline='true'</code>.' Name="Outline">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Primary">Primary</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Secondary">Secondary</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Success">Success</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Danger">Danger</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Warning">Warning</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Info">Information</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Dark">Dark</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Light">Highlight</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsOutline="true" Color="Color.Link">Link</Button></div>
    </div>
</DemoBlock>

<DemoBlock Title="Different sizes." Introduction='The Button component provides a variety of sizes in addition to the default values, and by setting the <code>Size</code> property, you can select the appropriate button size in different scenarios.' Name="Size">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraSmall" Color="Color.Primary">ExtraSmall</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Small" Color="Color.Secondary">Small</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.None" Color="Color.Info">Button</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Medium" Color="Color.Success">Medium</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.Large" Color="Color.Danger">Large</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraLarge" Color="Color.Warning">ExtraLarge</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button Size="Size.ExtraExtraLarge" Color="Color.Warning">ExtraExtraLarge</Button></div>
        <div class="col-12"><Button IsBlock="true" Color="Color.Primary">Block</Button></div>
    </div>
</DemoBlock>

<DemoBlock Title="Disable the state" Introduction="Button is not available. By setting the <code>IsDisabled</code> property" Name="IsDisabled">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Primary">Primary</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Secondary">Secondary</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Success">Success</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Danger">Danger</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Warning">Warning</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Info">Information</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Dark">Dark</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Light">Highlight</Button></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Button IsDisabled="true" Color="Color.Link">Link</Button></div>
    </div>

    <p class="mt-3">Button disable effects can be achieved by setting its own <code>IsDisabled</code> property in the <code>OnClick</code> callback method, or by calling the component instance method <code>SetDisable</code></p>
    <p>Because using the <code>IsDisabled</code> property requires an explicit manual call to the <code>StateHasChanged</code> method, which causes the component where the button is located to refresh as a whole, it is recommended that you use the instance method <code>SetDisable</code> refresh the button only</p>

    <p><b>Performance comparison:</b></p>
    <ul class="ul-demo mb-3">
        <li>This page transfer is <code>4.8K</code> when set with the <code>IsDisabled</code> property</li>
        <li>This page transfer is <code>280B</code> when set up using the <code>SetDisable</code> method</li>
    </ul>
    <div class="row g-3">
        <div class="col-12">
            <Button Text="Click to be disabled" OnClick="@ClickButton1" @ref="ButtonDisableDemo" IsDisabled="@IsDisable">
                <Tooltip Title="Tooltip is destroyed when the button is clicked" Placement="Placement.Top" Trigger="hover" />
            </Button>
            <Button Color="Color.Info" Text="Click to make the first button available" OnClickWithoutRender="@ClickButton2" class="ms-3"></Button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Button group" Introduction="A combination of multiple buttons" Name="Color">
    <div class="btn-group" role="group">
        <Button Color="Color.Primary">Button one</Button>
        <Button Color="Color.Success">Button two</Button>
    </div>
</DemoBlock>

<DemoBlock Title="Button with icon" Introduction="Set the button icon by setting the <code>Icon</code> property, which is <code>fa-fa</code> when using font strings such as the <code>font-awesome</code> icon" Name="Icon">
    <div class="row g-3">
        <div class="col-auto">
            <Button Color="Color.Primary" Icon="fa fa-fa" Text="Status button"></Button>
        </div>
        <div class="col-auto">
            <Button Color="Color.Info" Icon="fa fa-spinner fa-spin fa-fw" Text="Progress button"></Button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Secondary encapsulation button" Introduction="The button display text is set by setting the <code>Text</code> property of the <code>winButton</code> component, and the click button is the text on the right that shows the clicked button" Name="Extension">
    <div class="row g-3">
        <div class="col-auto">
            <WinButton Text="Button one" OnClick="@ClickButtonShowText"></WinButton>
        </div>
        <div class="col-auto">
            <WinButton Text="Button two" OnClick="@ClickButtonShowText"></WinButton>
        </div>
        <div class="col-auto" style="padding: 7px 0;">
            @ButtonText
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Asynchronous request button" Introduction="By setting whether the <code>isAsync</code> property button is <b>asynchronous request button by setting whether the is</b> <code>false</code> by default" Name="Async">
    <p>When the button is an asynchronous request button, the button is changed to disabled, and the <code>loading</code> small icon is displayed, returning to normal after the asynchronous request ends, in this case, after clicking the <b>asynchronous button</b>, the request load animation is displayed and returns to normal after 5 seconds</p>
    <Button Text="Asynchronous" IsAsync="true" Icon="fa fa-fw fa-fa" OnClick="@ClickAsyncButton" />
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />

<MethodTable Items="@GetMethods()" />

// 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.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Components;
using Microsoft.AspNetCore.Components.Web;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Buttons
{
    [NotNull]
    private BlockLogger? Trace { get; set; }

    [NotNull]
    private Button? ButtonDisableDemo { get; set; }

    private bool IsDisable { get; set; }

    private void ClickButton1()
    {
        IsDisable = !IsDisable;
        StateHasChanged();
    }

    private Task ClickButton2()
    {
        IsDisable = false;
        ButtonDisableDemo.SetDisable(false);
        return Task.CompletedTask;
    }

    /// <summary>
    /// 
    /// </summary>
    /// <param name="e"></param>
    private void ButtonClick(MouseEventArgs e)
    {
        Trace.Log($"Button Clicked");
    }

    private string ButtonText { get; set; } = "";

    private Task ClickButtonShowText(string text)
    {
        ButtonText = text;
        StateHasChanged();
        return Task.CompletedTask;
    }

    private static Task ClickAsyncButton() => Task.Delay(5000);

    /// <summary>
    /// 获得事件方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<EventItem> GetEvents() => new EventItem[]
    {
            new EventItem()
            {
                Name = "OnClick",
                Description = Localizer["EventDesc1"],
                Type ="EventCallback<MouseEventArgs>"
            },
            new EventItem()
            {
                Name = "OnClickWithoutRender",
                Description = Localizer["EventDesc2"],
                Type ="Func<Task>"
            }
    };

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Color",
                Description = Localizer["Att1"],
                Type = "Color",
                ValueList = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
                DefaultValue = "Primary"
            },
            new AttributeItem() {
                Name = "Icon",
                Description = Localizer["Att2"],
                Type = "string",
                ValueList = "",
                DefaultValue = ""
            },
            new AttributeItem() {
                Name = "LoadingIcon",
                Description = Localizer["Att3"],
                Type = "string",
                ValueList = "",
                DefaultValue = "fa fa-fw fa-spin fa-spinner"
            },
            new AttributeItem() {
                Name = "Text",
                Description = Localizer["Att4"],
                Type = "string",
                ValueList = "",
                DefaultValue = ""
            },
            new AttributeItem() {
                Name = "Size",
                Description = Localizer["Att5"],
                Type = "Size",
                ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge",
                DefaultValue = "None"
            },
            new AttributeItem() {
                Name = "Class",
                Description = Localizer["Att6"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "IsBlock",
                Description = Localizer["Att7"],
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsDisabled",
                Description = Localizer["Att8"],
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsOutline",
                Description = Localizer["Att9"],
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsAsync",
                Description = Localizer["Att10"],
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ChildContent",
                Description = Localizer["Att11"],
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ButtonStyle",
                Description = Localizer["Att12"],
                Type = "ButtonStyle",
                ValueList = "None / Circle / Round",
                DefaultValue = "None"
            },
            new AttributeItem() {
                Name = "ButtonType",
                Description = Localizer["Att13"],
                Type = "ButtonType",
                ValueList = "Button / Submit / Reset",
                DefaultValue = "Button"
            }
    };

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    private IEnumerable<MethodItem> GetMethods() => new MethodItem[]
    {
            new MethodItem()
            {
                Name = "SetDisable",
                Description = Localizer["MethodDesc1"],
                Parameters = "disable",
                ReturnValue = " — "
            }
    };
}