@page "/messages"

<h3>Message 消息提示</h3>

<h4>常用于主动操作后的反馈提示。与 Toast 的区别是后者更多用于系统级通知的被动提醒</h4>

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

<p class="code-label">1. 注入服务 <code>MessageService</code></p>
<Pre>@inject MessageService MessageService</Pre>
<Pre>[Inject]
[NotNull]
private MessageService? MessageService { get; set; }
</Pre>
<p class="code-label">2. 调用其实例 <code>api</code></p>
<Pre>await MessageService.Show(new MessageOption()
{
    Content = "这是一条提示消息"
});</Pre>

<DemoBlock Title="基础用法" Introduction="从顶部出现，4 秒后自动消失" Name="Normal">
    <button class="btn btn-primary" @onclick="@ShowMessage">打开消息提示</button>
</DemoBlock>

<DemoBlock Title="带图标的消息框" Introduction="通过设置 <code>MessageOption</code> 的 <code>Icon</code> 属性，更改消息框左侧小图标" Name="Icon">
    <button class="btn btn-primary" @onclick="@ShowIconMessage">打开消息提示</button>
</DemoBlock>

<DemoBlock Title="带关闭按钮的消息框" Introduction="通过设置 <code>MessageOption</code> 的 <code>ShowDismiss</code> 属性，更改消息框右侧出现关闭按钮" Name="CloseButton">
    <button class="btn btn-primary" @onclick="@ShowCloseMessage">打开消息提示</button>
</DemoBlock>

<DemoBlock Title="左侧带边框的消息框" Introduction="通过设置 <code>MessageOption</code> 的 <code>ShowBar</code> 属性，更改消息框左侧边框样式" Name="LeftBoard">
    <button class="btn btn-primary" @onclick="@ShowBarMessage">打开消息提示</button>
</DemoBlock>

<DemoBlock Title="不同颜色的消息框" Introduction="通过设置 <code>MessageOption</code> 的 <code>Color</code> 属性，更改消息框颜色" Name="DifferentColor">
    <div class="row g-3">
        <div class="col-6 col-sm-auto">
            <button class="btn btn-primary" @onclick="@(e => ShowColorMessage(Color.Primary))">Primary 消息</button>
        </div>
        <div class="col-6 col-sm-auto">
            <button class="btn btn-success" @onclick="@(e => ShowColorMessage(Color.Success))">Success 消息</button>
        </div>
        <div class="col-6 col-sm-auto">
            <button class="btn btn-info" @onclick="@(e => ShowColorMessage(Color.Info))">Info 消息</button>
        </div>
        <div class="col-6 col-sm-auto">
            <button class="btn btn-danger" @onclick="@(e => ShowColorMessage(Color.Danger))">Danger 消息</button>
        </div>
        <div class="col-6 col-sm-auto">
            <button class="btn btn-warning" @onclick="@(e => ShowColorMessage(Color.Warning))">Warning 消息</button>
        </div>
        <div class="col-6 col-sm-auto">
            <button class="btn btn-secondary" @onclick="@(e => ShowColorMessage(Color.Secondary))">Secondary 消息</button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="消息框弹出位置" Introduction="通过设置 <code>MessageService</code> 服务的组件参数，指定已经设置底部显示位置的 <code>Message</code> 组件" Name="Position">
    <button class="btn btn-primary" @onclick="@ShowBottomMessage">打开消息提示</button>
    <Message @ref="Message" Placement="Placement.Bottom" />
</DemoBlock>

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

<AttributeTable Title="MessageItem 属性" Items="@GetMessageItemAttributes()" />

// 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;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Messages
{
    [NotNull]
    private Message? Message { get; set; }

    /// <summary>
    /// 
    /// </summary>
    [Inject]
    [NotNull]
    public MessageService? MessageService { get; set; }

    private async Task ShowMessage()
    {
        Message.SetPlacement(Placement.Top);
        await MessageService.Show(new MessageOption()
        {
            Content = "这是一条提示消息"
        });
    }

    private async Task ShowIconMessage()
    {
        await MessageService.Show(new MessageOption()
        {
            Content = "这是一条提示消息",
            Icon = "fa fa-info-circle"
        });
    }

    private async Task ShowCloseMessage()
    {
        await MessageService.Show(new MessageOption()
        {
            Content = "这是一条提示消息",
            Icon = "fa fa-info-circle",
            ShowDismiss = true,
        });
    }

    private async Task ShowBarMessage()
    {
        await MessageService.Show(new MessageOption()
        {
            Content = "这是一条提示消息",
            Icon = "fa fa-info-circle",
            ShowBar = true,
        });
    }

    private async Task ShowColorMessage(Color color)
    {
        await MessageService.Show(new MessageOption()
        {
            Content = "这是带颜色的消息",
            Icon = "fa fa-info-circle",
            Color = color
        });
    }

    private async Task ShowBottomMessage()
    {
        await MessageService.Show(new MessageOption()
        {
            Content = "这是一条提示消息",
            Icon = "fa fa-info-circle",
        }, Message);
    }

    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Placement",
                Description = "消息弹出位置",
                Type = "Placement",
                ValueList = "Top|Bottom",
                DefaultValue = "Top"
            }
    };

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<AttributeItem> GetMessageItemAttributes() => new AttributeItem[]
    {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "ChildContent",
                Description = "内容",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Class",
                Description = "样式",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Color",
                Description = "颜色",
                Type = "Color",
                ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
                DefaultValue = "Primary"
            },
            new AttributeItem() {
                Name = "Icon",
                Description = "图标",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ShowDismiss",
                Description = "关闭按钮",
                Type = "bool",
                ValueList = " — ",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ShowBar",
                Description = "是否显示左侧 Bar",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            }
    };
}