@page "/swals"

<h3>SweetAlert 弹窗组件</h3>

<h4>模态对话框，多用于动作过程中进行询问后继续，或者显示执行结果</h4>

<p>组件使用介绍：</p>

<p class="code-label">1. 注入服务 <code>SwalService</code></p>
<Pre>@inject SwalService SwalService</Pre>
<Pre>[Inject]
[NotNull]
private SwalService? SwalService { get; set; }
</Pre>
<p class="code-label">2. 调用其实例 <code>api</code></p>
<Pre>var op = new SwalOption()
{
    Category = SwalCategory.Success,
    Title = "我是 Title",
    Content = "我是 Content",
    ShowClose = false
};
await SwalService.Show(op);</Pre>

<DemoBlock Title="基础用法" Introduction="通过注入服务调用 <code>Swal</code> 来弹出一个对话框" Name="Normal">
    <div class="row g-3">
        <div class="col-4 align-self-center text-center">
            <div class="text-success">成功</div>
        </div>
        <div class="col-4">
            <div class="swal2-icon swal2-success">
                <div class="swal2-success-circular-line-left"></div>
                <span class="swal2-success-line-tip"></span><span class="swal2-success-line-long"></span>
                <div class="swal2-success-ring"></div><div class="swal2-success-fix"></div>
                <div class="swal2-success-circular-line-right"></div>
            </div>
        </div>
        <div class="col-4 align-self-center text-center">
            <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Success" OnClick="@(e => OnSwal(SwalCategory.Success))" />
        </div>
    </div>
    <div class="row g-3">
        <div class="col-4 align-self-center text-center">
            <div class="text-danger">失败</div>
        </div>
        <div class="col-4">
            <div class="swal2-icon swal2-error">
                <span class="swal2-x-mark">
                    <span class="swal2-x-mark-line-left"></span>
                    <span class="swal2-x-mark-line-right"></span>
                </span>
            </div>
        </div>
        <div class="col-4 align-self-center text-center">
            <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Danger" OnClick="@(e => OnSwal(SwalCategory.Error))" />
        </div>
    </div>
    <div class="row g-3">
        <div class="col-4 align-self-center text-center">
            <div class="text-warning">警告</div>
        </div>
        <div class="col-4">
            <div class="swal2-icon swal2-warning"></div>
        </div>
        <div class="col-4 align-self-center text-center">
            <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Warning" OnClick="@(e => OnSwal(SwalCategory.Warning))" />
        </div>

    </div>
    <div class="row g-3">
        <div class="col-4 align-self-center text-center">
            <div class="text-info">提示</div>
        </div>
        <div class="col-4">
            <div class="swal2-icon swal2-info"></div>
        </div>
        <div class="col-4 align-self-center text-center">
            <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Info" OnClick="@(e => OnSwal(SwalCategory.Information))" />
        </div>
    </div>
    <div class="row g-3">
        <div class="col-4 align-self-center text-center">
            <div class="text-secondary">疑问</div>
        </div>
        <div class="col-4">
            <div class="swal2-icon swal2-question"></div>
        </div>
        <div class="col-4 align-self-center text-center">
            <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Secondary" OnClick="@(e => OnSwal(SwalCategory.Question))" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="设置显示内容" Introduction="通过设置 <code>Title</code> <code>Content</code> 用于显示弹窗标题与内容" Name="Dispaly">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Button Icon="fa fa-fa" Text="Title" Color="Color.Success" OnClick="@ShowTitle" />
        </div>
        <div class="col-12 col-sm-6">
            <Button Icon="fa fa-fa" Text="Content" Color="Color.Success" OnClick="@ShowContent" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="自定义按钮" Introduction="通过设置 <code>ButtonTemplate</code> 自定义弹窗内按钮" Name="Button">
    <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Success" OnClick="@ShowButtons" />
</DemoBlock>

<DemoBlock Title="显示自定义组件" Introduction="通过设置 <code>Component</code> 弹窗内容为自定义组件" Name="Component">
    <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Success" OnClick="@ShowComponent" />
</DemoBlock>

<DemoBlock Title="模态对话框" Introduction="通过调用 <code>await SwalService.ShowModal</code> 方法弹出模态框，点击弹窗内按钮关闭弹窗后，后续代码继续执行" Name="Modal">
    <p>本示例代码通过调用 <code>await SwalService.ShowModal</code> 方法弹出模态框，只有关闭弹窗后，后续代码才继续执行</p>
    <p><code>IsConfirm</code> 参数表示弹窗为确认窗口，自动生成 <code>取消</code> <code>确认</code> 两个按钮</p>
    <Pre class="no-highlight">var ret = await SwalService.ShowModal(op);

// ShowModal 返回后下面代码才执行
Trace?.Log($"模态弹窗返回值为：{ret}");
</Pre>
    <Button Icon="fa fa-fa" Text="模态对话框" Color="Color.Success" OnClick="@ShowModal" />

    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="显示 Footer 信息" Introduction="通过设置 <code>FooterTemplate</code> 自定义 Footer 模板" Name="Footer">
    <p>参数 <code>ShowFooter</code> 默认为 <code>false</code> 不显示页脚模板，需要显示设置为 <code>true</code></p>
    <Button Icon="fa fa-fa" Text="带 Footer 弹窗" Color="Color.Success" OnClick="@ShowFooterComponent" />
</DemoBlock>

<DemoBlock Title="自动关闭功能" Introduction="通过设置 <code>IsAutoHide</code> <code>Delay</code> 属性，自定义自动关闭时间" Name="Close">
    <p>
        参数 <code>IsAutoHide</code> 默认为 <code>false</code> 不启用自动关闭功能
        <br />
        参数 <code>Delay</code> 默认为 4000 毫秒
    </p>
    <Button Icon="fa fa-fa" Text="自动关闭弹窗" Color="Color.Success" OnClick="@ShowAutoCloseSwal" />
</DemoBlock>

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

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

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class SweetAlerts
{
    private Task OnSwal(SwalCategory cate) => SwalService.Show(new SwalOption()
    {
        Category = cate,
        Title = "Sweet 弹窗"
    });

    private Task ShowTitle() => SwalService.Show(new SwalOption()
    {
        Category = SwalCategory.Success,
        Title = "我是 Title"
    });

    private Task ShowContent() => SwalService.Show(new SwalOption()
    {
        Category = SwalCategory.Success,
        Content = "我是 Content"
    });

    [Inject]
    [NotNull]
    private SwalService? SwalService { get; set; }

    private async Task ShowButtons()
    {
        var op = new SwalOption()
        {
            Category = SwalCategory.Success,
            Title = "我是 Title",
            Content = "我是 Content",
            ShowClose = false
        };
        op.ButtonTemplate = new RenderFragment(builder =>
        {
            builder.OpenComponent<Button>(0);
            builder.AddAttribute(1, nameof(Button.Text), "自定义关闭按钮");
            builder.AddAttribute(2, nameof(Button.OnClick), EventCallback.Factory.Create<MouseEventArgs>(this, async () => await op.Close()));
            builder.CloseComponent();
        });
        await SwalService.Show(op);
    }

    private async Task ShowComponent()
    {
        var op = new SwalOption()
        {
            BodyTemplate = new RenderFragment(builder =>
            {
                builder.OpenElement(0, "div");
                builder.AddAttribute(1, "class", "text-center");
                builder.OpenComponent<Counter>(2);
                builder.CloseComponent();
                builder.CloseElement();
            })
        };
        await SwalService.Show(op);
    }

    private async Task ShowFooterComponent()
    {
        var op = new SwalOption()
        {
            Category = SwalCategory.Error,
            Title = "Oops...",
            Content = "Something went wrong!",
            ShowFooter = true,
            FooterTemplate = BootstrapDynamicComponent.CreateComponent<SwalFooter>().Render()
        };
        await SwalService.Show(op);
    }

    private async Task ShowAutoCloseSwal()
    {
        var op = new SwalOption()
        {
            Category = SwalCategory.Error,
            Title = "Oops...",
            Content = "Something went wrong!",
            ShowFooter = true,
            IsAutoHide = true,
            Delay = 4000,
            FooterTemplate = BootstrapDynamicComponent.CreateComponent<SwalFooter>().Render()
        };
        await SwalService.Show(op);
    }

    private BlockLogger? Trace { get; set; }

    private async Task ShowModal()
    {
        var op = new SwalOption()
        {
            Title = "模态对话框示例",
            Content = "模态对话框内容，不同按钮返回不同值"
        };
        var ret = await SwalService.ShowModal(op);

        Trace?.Log($"模态弹窗返回值为：{ret}");
    }

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = "Category",
            Description = "弹出框类型",
            Type = "SwalCategory",
            ValueList = "Success/Error/Information/Warning/Question",
            DefaultValue = "Success"
        },
        new AttributeItem() {
            Name = "Title",
            Description = "弹窗标题",
            Type = "string",
            ValueList = "—",
            DefaultValue = ""
        },
        new AttributeItem() {
            Name = "Cotent",
            Description = "弹窗内容",
            Type = "string",
            ValueList = "—",
            DefaultValue = ""
        },
        new AttributeItem() {
            Name = "Delay",
            Description = "自动隐藏时间间隔",
            Type = "int",
            ValueList = "—",
            DefaultValue = "4000"
        },
        new AttributeItem() {
            Name = "IsAutoHide",
            Description = "是否自动隐藏",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "ShowClose",
            Description = "是否显示关闭按钮",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "ShowFooter",
            Description = "是否显示页脚模板",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "IsConfirm",
            Description = "是否为确认弹窗模式",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "BodyContext",
            Description = "弹窗传参",
            Type = "object",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "BodyTemplate",
            Description = "模态主体显示组件",
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "FooterTemplate",
            Description = "模态主体页脚组件",
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "ButtonTemplate",
            Description = "模态按钮模板",
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        }
    };
}