@page "/swals"
@inject IStringLocalizer<SweetAlerts> Localizer

<h3>SweetAlert popup component</h3>
<h4>Modal dialog box, mostly used to continue after inquiring during the action, or to display the execution result</h4>

<p>Component usage introduction：</p>

<p class="code-label">1. Inject the service <code>SwalService</code></p>
<Pre>@inject SwalService SwalService</Pre>
<Pre>[Inject]
[NotNull]
private SwalService? SwalService { get; set; }
</Pre>
<p class="code-label">2. Call its instance <code>api</code></p>
<Pre>var op = new SwalOption()
{
    Category = SwalCategory.Success,
    Title = "I am Title",
    Content = "I am Content",
    ShowClose = false
};
await SwalService.Show(op);</Pre>

<DemoBlock Title="Basic usage" Introduction="Call <code>Swal</code> by injecting the service to pop up a dialog" Name="Normal">
    <div class="row g-3">
        <div class="col-4 align-self-center text-center">
            <div class="text-success">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-solid fa-font-awesome" Text="Pop-ups" 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">fail</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-solid fa-font-awesome" Text="Pop-ups" 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">warn</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-solid fa-font-awesome" Text="Pop-ups" 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">hint</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-solid fa-font-awesome" Text="Pop-ups" 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">doubt</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-solid fa-font-awesome" Text="Pop-ups" Color="Color.Secondary" OnClick="@(e => OnSwal(SwalCategory.Question))" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Set display content" Introduction="By setting <code>Title</code> <code>Content</code> is used to display the title and content of the pop-up window" Name="Dispaly">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Button Icon="fa-solid fa-font-awesome" Text="Title" Color="Color.Success" OnClick="@ShowTitle" />
        </div>
        <div class="col-12 col-sm-6">
            <Button Icon="fa-solid fa-font-awesome" Text="Content" Color="Color.Success" OnClick="@ShowContent" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Custom button" Introduction="Customize the buttons in the pop-up window by setting <code>ButtonTemplate</code>" Name="Button">
    <Button Icon="fa-solid fa-font-awesome" Text="Pop-ups" Color="Color.Success" OnClick="@ShowButtons" />
</DemoBlock>

<DemoBlock Title="Show custom components" Introduction="By setting the <code>Component</code> popup content as a custom component" Name="Component">
    <Button Icon="fa-solid fa-font-awesome" Text="Pop-ups" Color="Color.Success" OnClick="@ShowComponent" />
</DemoBlock>

<DemoBlock Title="Modal dialog" Introduction="By calling the <code>await SwalService.ShowModal</code> method, the modal box is popped up. After clicking the button in the pop-up window to close the pop-up window, the subsequent code continues to execute." Name="Modal">
    <p>This sample code calls The method <code>await SwalService.ShowModal</code> pops up a modal box, and the subsequent code continues to execute only after the pop-up window is closed.</p>
    <p><code>IsConfirm</code> The parameter indicates that the pop-up window is a confirmation window, and two buttons are automatically generated <code>Cancel</code> <code>Confirm</code></p>
    <Pre class="no-highlight">var ret = await SwalService.ShowModal(op);

// ShowModal
Trace.Log($"{ret}");
</Pre>
    <Button Icon="fa-solid fa-font-awesome" Text="Pop-ups" Color="Color.Success" OnClick="@ShowModal" />
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Show Footer Information" Introduction="Customize the Footer template by setting <code>FooterTemplate</code>" Name="Footer">
    <p>parameter <code>ShowFooter</code> The default is <code>false</code> to not display the footer template, it needs to be set to <code>true</code></p>
    <Button Icon="fa-solid fa-font-awesome" Text="Popup with Footer" Color="Color.Success" OnClick="@ShowFooterComponent" />
</DemoBlock>

<DemoBlock Title="Auto-off function" Introduction="Customize the auto-close time by setting the <code>IsAutoHide</code> <code>Delay</code> property" Name="Close">
    <p>        
        parameter <code>IsAutoHide</code> Defaults to <code>false</code> to disable auto-close, The parameter <code>Delay</code> defaults to 4000 milliseconds
    </p>
    <Button Icon="fa-solid fa-font-awesome" Text="Automatically close popups" 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 Microsoft.AspNetCore.Components.Web;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public 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), "Close");
            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);
    }

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

    private async Task ShowModal()
    {
        var op = new SwalOption()
        {
            Title = Localizer["SwalOptionTitle"],
            Content = Localizer["SwalOptionContent"]
        };
        var ret = await SwalService.ShowModal(op);

        Trace.Log($"{Localizer["SwalConsoleInfo"]}：{ret}");
    }

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = "Category",
            Description = Localizer["AttrCategory"],
            Type = "SwalCategory",
            ValueList = "Success/Error/Information/Warning/Question",
            DefaultValue = "Success"
        },
        new AttributeItem() {
            Name = "Title",
            Description = Localizer["AttrTitle"],
            Type = "string",
            ValueList = "—",
            DefaultValue = ""
        },
        new AttributeItem() {
            Name = "Cotent",
            Description = Localizer["AttrContent"],
            Type = "string",
            ValueList = "—",
            DefaultValue = ""
        },
        new AttributeItem() {
            Name = "Delay",
            Description = Localizer["AttrDelay"],
            Type = "int",
            ValueList = "—",
            DefaultValue = "4000"
        },
        new AttributeItem() {
            Name = "IsAutoHide",
            Description = Localizer["AttrAutoHide"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "ShowClose",
            Description = Localizer["AttrShowClose"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "ShowFooter",
            Description = Localizer["AttrShowFooter"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "IsConfirm",
            Description = Localizer["AttrIsConfirm"],
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "BodyContext",
            Description = Localizer["AttrBodyContext"],
            Type = "object",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "BodyTemplate",
            Description = Localizer["AttrBodyTemplate"],
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "FooterTemplate",
            Description = Localizer["AttrFooterTemplate"],
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "ButtonTemplate",
            Description = Localizer["AttrButtonTemplate"],
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        }
    };
}