@page "/toasts"
@inject ToastService ToastService
@inject IJSRuntime JSRuntime

<h3>Toast 轻量弹窗</h3>

<h4>提供轻量级 Toast 弹窗</h4>

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

<p class="code-label">1. 注入服务 <code>ToastService</code></p>
<Pre>@inject ToastService ToastService</Pre>
<Pre>[Inject]
[NotNull]
private ToastService? ToastService { get; set; }
</Pre>
<p class="code-label">2. 调用其实例 <code>api</code></p>
<Pre>await ToastService.Success("Title", "Content", autoHide: true);</Pre>

<DemoBlock Title="基础用法" Introduction="用户操作时，右下角给予适当的提示信息" Name="Normal">
    <div class="row g-3 overflow-hidden">
        <div class="col-12 col-lg-6 col-xl-3">
            <ToastBox class="d-block" Options="@Options1" />
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <ToastBox class="d-block" Options="@Options2" />
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <ToastBox class="d-block" Options="@Options3" />
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <ToastBox class="d-block" Options="@Options4" />
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <Button Color="Color.Success" Icon="fa fa-check-circle" OnClick="@OnSuccessClick" Text="成功通知"></Button>
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <Button Color="Color.Danger" Icon="fa fa-times-circle" OnClick="@OnErrorClick" Text="失败通知"></Button>
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <Button Color="Color.Info" Icon="fa fa-exclamation-circle" OnClick="@OnInfoClick" Text="信息通知"></Button>
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <Button Color="Color.Warning" Icon="fa fa-exclamation-triangle" OnClick="@OnWarningClick" Text="警告通知"></Button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Toast 手动关闭" Introduction="不会自动关闭，需要人工点击关闭按钮"  Name="Close">
    <Button Icon="fa fa-exclamation-triangle" OnClick="@OnNotAutoHideClick" Text="成功通知"></Button>
</DemoBlock>

<DemoBlock Title="Toast 显示位置" Introduction="提供设置 Toast 弹窗出现位置" Name="Position">
    <p>通过设置 <code>Toast</code> 组件的 <code>Placement</code> 值来设置弹窗出现的位置，默认值为 <code>BottomEnd</code> 除此之外的值均为右上角</p>
    <div class="row g-3">
        <div class="col-6 col-md-3">
            <Button OnClick="e => OnPlacementClick(Placement.TopEnd)">右上角</Button>
        </div>
        <div class="col-6 col-md-3">
            <Button OnClick="e => OnPlacementClick(Placement.BottomEnd)">右下角</Button>
        </div>
        <div class="col-6 col-md-3">
            <Button OnClick="e => OnPlacementClick(Placement.TopStart)">左上角</Button>
        </div>
        <div class="col-6 col-md-3">
            <Button OnClick="e => OnPlacementClick(Placement.BottomStart)">左下角</Button>
        </div>
    </div>
</DemoBlock>

<h4>特别注意</h4>

<p>本组件使用注入服务的形式提供功能，使用时用户体验效果非常舒适，随时随地的调用</p>

<p>注入服务提供以下几种快捷调用方法</p>

<ul class="ul-demo mb-3">
    <li>Success()</li>
    <li>Error()</li>
    <li>Information()</li>
    <li>Warning()</li>
</ul>

<p>示例如下：</p>

<Pre>ToastService?.Success("保存成功", "保存数据成功，4 秒后自动关闭");</Pre>

<Pre>private void OnInfoClick()
{
    ToastService.Show(new ToastOption()
    {
        // 通知类别
        Category = ToastCategory.Information,

        // 通知框 Title 值
        Title = "消息通知",

        // 通知正文内容
        Content = "系统增加新组件啦，4 秒后自动关闭"
    });
}
</Pre>

<Tips>特别说明: 可以通过 <code>BootstrapBlazorOptions</code> 全局统一配置参数可以设置整个系统内的 <code>Toast</code> 组件 <code>Delay</code> 参数值</Tips>

<p>通过配置文件 <code>appsetting.json</code> 文件配置，适用于 <code>Server-Side App</code></p>

<Pre>"BootstrapBlazorOptions": {
    "ToastDelay": 4000,
    "MessageDelay": 4000,
    "SwalDelay": 4000
}
</Pre>

<p>通过 <code>Startup</code> 文件中的 <code>ConfigureServices</code> 方法配置，适用于 <code>Server-Side App</code> 和 <code>WebAssembly App</code></p>

<Pre>public void ConfigureServices(IServiceCollection services)
{
    // 统一设置 Toast 组件自动消失时间
    services.Configure<BootstrapBlazorOptions>(options =>
    {
        options.ToastDelay = 4000;
    });
}
</Pre>

<div class="mb-3">或者，仅适用于 <code>Server-Side App</code></div>

<Pre>public void ConfigureServices(IServiceCollection services)
{
    // 增加 BootstrapBlazor 组件
    services.AddBootstrapBlazor(options =>
    {
        // 统一设置 Toast 组件自动消失时间
        options.ToastDelay = 4000;
    });
}
</Pre>

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

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// Toasts 示例
/// </summary>
public sealed partial class Toasts
{
    [NotNull]
    private Toast? Toast { get; set; }

    [NotNull]
    private ToastOption? Options1 { get; set; }

    [NotNull]
    private ToastOption? Options2 { get; set; }

    [NotNull]
    private ToastOption? Options3 { get; set; }

    [NotNull]
    private ToastOption? Options4 { get; set; }

    [CascadingParameter]
    [NotNull]
    private BootstrapBlazorRoot? Root { get; set; }

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

        Options1 = new ToastOption { Title = "保存数据", IsAutoHide = false, Content = "保存数据成功，4 秒后自动关闭" };
        Options2 = new ToastOption { Category = ToastCategory.Error, Title = "保存数据", IsAutoHide = false, Content = "保存数据成功，4 秒后自动关闭" };
        Options3 = new ToastOption { Category = ToastCategory.Information, Title = "提示信息", IsAutoHide = false, Content = "信息提示弹窗，4 秒后自动关闭" };
        Options4 = new ToastOption { Category = ToastCategory.Warning, Title = "警告信息", IsAutoHide = false, Content = "信息提示弹窗，4 秒后自动关闭" };

        Toast = Root.ToastContainer;
    }

    /// <summary>
    /// 
    /// </summary>
    /// <param name="firstRender"></param>
    /// <returns></returns>
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("$._showToast");
        }
    }

    private async Task OnPlacementClick(Placement placement)
    {
        Toast.SetPlacement(placement);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Information,
            Title = "消息通知",
            Content = "<b>Toast</b> 组件更改位置啦，4 秒后自动关闭"
        });
    }

    private async Task OnSuccessClick()
    {
        Toast.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Success,
            Title = "保存成功",
            Content = "保存数据成功，4 秒后自动关闭"
        });
    }

    private async Task OnErrorClick()
    {
        Toast.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Error,
            Title = "保存失败",
            Content = "保存数据失败，4 秒后自动关闭"
        });
    }

    private async Task OnInfoClick()
    {
        Toast.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Information,
            Title = "消息通知",
            Content = "系统增加新组件啦，4 秒后自动关闭"
        });
    }

    private async Task OnWarningClick()
    {
        Toast.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Warning,
            Title = "警告通知",
            Content = "系统发现异常请及时处理，4 秒后自动关闭"
        });
    }

    /// <summary>
    /// 
    /// </summary>
    private async Task OnNotAutoHideClick()
    {
        Toast.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Warning,
            IsAutoHide = false,
            Title = "消息通知",
            Content = "我不会自动关闭哦，请点击右上角关闭按钮"
        });
    }

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Category",
                Description = "弹出框类型",
                Type = "ToastCategory",
                ValueList = "Success/Information/Error/Warning",
                DefaultValue = "Success"
            },
            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 = "",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "IsHtml",
                Description = "内容中是否包含 Html 代码",
                Type = "boolean",
                ValueList = "",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "Placement",
                Description = "位置",
                Type = "Placement",
                ValueList = "Auto / Top / Left / Bottom / Right",
                DefaultValue = "Auto"
            },
            new AttributeItem() {
                Name = "Title",
                Description = "弹窗标题",
                Type = "string",
                ValueList = "—",
                DefaultValue = ""
            },
    };
}