@page "/popconfirms"
@inject IStringLocalizer<PopoverConfirms> Localizer

<h3>Popconfirm bubble check box</h3>
<h4>Click on the element to pop up a bubble confirmation box.</h4>

<DemoBlock Title="Basic usage" Introduction="The attributes of <code>Popconfirm</code> are very similar to <code>Popover</code>, so for repeated attributes, please refer to the attributes of <a href='/popovers'><code>Popover</code><a> documentation, which is not explained in detail in this document." Name="Normal">
    <div class="d-flex justify-content-center border p-3 rounded">
        <div class="d-flex flex-column w-100" style="height: 240px;">
            <div class="d-flex justify-content-center">
                <PopConfirmButton Placement="Placement.Bottom" ConfirmButtonColor="Color.Danger" Text="pop-up box below" Content="Is this a piece of content sure to delete?" OnConfirm="@OnConfirm" OnClose="@OnClose" />
            </div>
            <div class="d-flex justify-content-between m-4 align-items-center flex-fill">
                <PopConfirmButton Placement="Placement.Right" Text="right popup" Content="Is this a piece of content sure to delete?" OnConfirm="@OnConfirm" OnClose="@OnClose" />
                <PopConfirmButton Placement="Placement.Left" Text="left popup" Content="Is this a piece of content sure to delete?" OnConfirm="@OnConfirm" OnClose="@OnClose" />
            </div>
            <div class="d-flex justify-content-center">
                <PopConfirmButton Placement="Placement.Top" Text="popup above" Content="Are you sure you want to delete a piece of content?" OnConfirm="@OnConfirm" OnClose="@OnClose" />
            </div>
        </div>
    </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Content Change the text displayed in the confirmation popup" Introduction="Change the text displayed in the confirmation popup by setting the <code>Content</code> attribute" Name="Content">
    <PopConfirmButton Placement="Placement.Top" Color="Color.Danger" ConfirmIcon="fa-solid fa-triangle-exclamation text-danger" ConfirmButtonColor="Color.Danger" Text="Delete confirmation button" Content="Are you sure you want to delete the data?" />
</DemoBlock>

<DemoBlock Title="Asynchronous confirmation" Introduction="By setting the <code>IsAsync</code> attribute, the data is submitted asynchronously when the confirm button is clicked" Name="IsAsync">
    <PopConfirmButton Placement="Placement.Top" Color="Color.Danger" ConfirmIcon="fa-solid fa-triangle-exclamation text-danger"
                      ConfirmButtonColor="Color.Danger" Text="Asynchronous confirmation" Content="Are you sure you want to delete the data?" Icon="fa-solid fa-font-awesome fa-fw" IsAsync="true"
                      OnConfirm="OnAsyncConfirm" />
</DemoBlock>

<DemoBlock Title="form submission" Introduction="By setting the <code>ButtonType</code> property value to <code>ButtonType.Submit</code>, the confirmation button is clicked to perform asynchronous form data submission" Name="Form">
    <ValidateForm Model="@Model" OnValidSubmit="OnValidSubmit" OnInvalidSubmit="OnInValidSubmit">
        <div class="row g-3 form-inline">
            <div class="col-12">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="col-12">
                <BootstrapInput @bind-Value="@Model.Address" />
            </div>
            <div class="col-12">
                <PopConfirmButton Placement="Placement.Top" Color="Color.Primary" ConfirmIcon="fa-solid fa-triangle-exclamation text-info"
                                  ConfirmButtonColor="Color.Success" Text="submit Form" Content="Are you sure you want to submit data?" Icon="fa-solid fa-floppy-disk fa-fw"
                                  ButtonType="ButtonType.Submit" IsAsync="true" OnConfirm="OnAsyncSubmit" />
            </div>
        </div>
    </ValidateForm>
    <BlockLogger @ref="Trace1" class="mt-3" />
</DemoBlock>

<DemoBlock Title="hyperlink button" Introduction="By setting the <code>IsLink</code> attribute the component uses the <code>A</code> tag to render" Name="IsLink">
    <PopConfirmButton Placement="Placement.Top" ConfirmIcon="fa-solid fa-triangle-exclamation text-danger" Color="Color.Danger"
                      ConfirmButtonColor="Color.Danger" Text="i am hyperlink" Content="Are you sure you want to delete the data?" IsLink="true" />
</DemoBlock>

<DemoBlock Title="custom style" Introduction="Set the <code>CssClass</code> custom component style" Name="CustomClass">
    <Pre>.custom-popover {
    --bs-popover-border-color: var(--bs-primary);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: 1rem;
}
</Pre>
    <PopConfirmButton Placement="Placement.Top" ConfirmIcon="fa-solid fa-triangle-exclamation text-danger" Color="Color.Danger"
                      ConfirmButtonColor="Color.Danger" Text="custom style button" Content="Are you sure you want to delete the data?" CustomClass="custom-popover" />
</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 Microsoft.AspNetCore.Components.Forms;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class PopoverConfirms
{
    [NotNull]
    private Foo? Model { get; set; }

    /// <summary>
    /// 
    /// </summary>
    [NotNull]
    private BlockLogger? Trace { get; set; }

    /// <summary>
    /// 
    /// </summary>
    [NotNull]
    private BlockLogger? Trace1 { get; set; }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Model = new() { Name = "Name", Education = EnumEducation.Primary, DateTime = DateTime.Now };
    }

    /// <summary>
    /// 
    /// </summary>
    private Task OnClose()
    {
        // This method is called back when the confirm button is clicked, and this method will not be called when the cancel button is clicked
        Trace.Log("OnClose Trigger");
        return Task.CompletedTask;
    }

    /// <summary>
    /// 
    /// </summary>
    private Task OnConfirm()
    {
        // This method is called back when the confirm button is clicked, and this method will not be called when the cancel button is clicked
        Trace.Log("OnConfirm Trigger");
        return Task.CompletedTask;
    }

    private static Task OnAsyncConfirm() => Task.Delay(3000);

    private async Task OnAsyncSubmit()
    {
        Trace1.Log("异步提交");
        await Task.Delay(3000);
    }

    private async Task OnValidSubmit(EditContext context)
    {
        await Task.Delay(3000);
        Trace1.Log("数据合规");
    }

    private Task OnInValidSubmit(EditContext context)
    {
        Trace1.Log("数据非法");
        return Task.CompletedTask;
    }

    /// <summary>
    /// Get property method
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = nameof(PopConfirmButton.IsLink),
            Description = "Whether to render the component for the A tag",
            Type = "bool",
            ValueList = "true/false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "Text",
            Description = "Show title",
            Type = "string",
            ValueList = "",
            DefaultValue = "删除"
        },
        new AttributeItem() {
            Name = "Icon",
            Description = "Button icon",
            Type = "string",
            ValueList = "",
            DefaultValue = "fa-solid fa-xmark"
        },
        new AttributeItem() {
            Name = "CloseButtonText",
            Description = "Close button display text",
            Type = "string",
            ValueList = "",
            DefaultValue = "关闭"
        },
        new AttributeItem() {
            Name = "CloseButtonColor",
            Description = "Confirm button color",
            Type = "Color",
            ValueList = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
            DefaultValue = "Secondary"
        },
        new AttributeItem() {
            Name = "Color",
            Description = "Color",
            Type = "Color",
            ValueList = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
            DefaultValue = "None"
        },
        new AttributeItem() {
            Name = "ConfirmButtonText",
            Description = "Confirm button display text",
            Type = "string",
            ValueList = "",
            DefaultValue = "确定"
        },
        new AttributeItem() {
            Name = "ConfirmButtonColor",
            Description = "Confirm button color",
            Type = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
            ValueList = "",
            DefaultValue = "Primary"
        },
        new AttributeItem() {
            Name = "ConfirmIcon",
            Description = "Confirmation box icon",
            Type = "string",
            ValueList = "",
            DefaultValue = "fa-solid fa-circle-exclamation text-info"
        },
        new AttributeItem() {
            Name = "Content",
            Description = "Display text",
            Type = "string",
            ValueList = "",
            DefaultValue = "Confirm delete?"
        },
        new AttributeItem() {
            Name = "Placement",
            Description = "Location",
            Type = "Placement",
            ValueList = "Auto / Top / Left / Bottom / Right",
            DefaultValue = "Auto"
        },
        new AttributeItem() {
            Name = "Title",
            Description = "Popover Popup title",
            Type = "string",
            ValueList = "",
            DefaultValue = " "
        }
    };

    /// <summary>
    /// Get event method
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<EventItem> GetEvents() => new EventItem[]
    {
        new EventItem()
        {
            Name = "OnConfirm",
            Description="Callback method when confirm is clicked",
            Type ="Func<Task>"
        },
        new EventItem()
        {
            Name = "OnClose",
            Description="Callback method when click close",
            Type ="Func<Task>"
        },
        new EventItem()
        {
            Name = "OnBeforeClick",
            Description="Click the callback method before confirming the pop-up window",
            Type ="Func<Task<bool>>"
        }
    };
}