@page "/messages"

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

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

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

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

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

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

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

<Block Title="消息框弹出位置" Introduction="通过设置 <code>Message</code> 组件的 <code>Placement</code> 属性，更改消息框弹出位置">
    <button class="btn btn-primary" @onclick="@ShowBottomMessage">打开消息提示</button>
</Block>

<Tips class="mt-3">
    <p>
        <code>Message</code> 组件使用了全局组件，需要再使用本组件的页面或者全局组件中内置本组件，示例代码如下：
    </p>
</Tips>

<Pre>&lt;Message /&gt;</Pre>

<Message @ref="MessageElement" />

<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;
using System.Collections.Generic;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Messages
    {
#nullable disable
        private Message MessageElement { get; set; }
#nullable restore

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

        private void ShowMessage()
        {
            MessageElement.SetPlacement(Placement.Top);
            MessageService?.Show(new MessageOption()
            {
                Host = MessageElement,
                Content = "这是一条提示消息"
            });
        }

        private void ShowIconMessage()
        {
            MessageElement.SetPlacement(Placement.Top);
            MessageService?.Show(new MessageOption()
            {
                Host = MessageElement,
                Content = "这是一条提示消息",
                Icon = "fa fa-info-circle"
            });
        }

        private void ShowCloseMessage()
        {
            MessageElement.SetPlacement(Placement.Top);
            MessageService?.Show(new MessageOption()
            {
                Host = MessageElement,
                Content = "这是一条提示消息",
                Icon = "fa fa-info-circle",
                ShowDismiss = true,
            });
        }

        private void ShowBarMessage()
        {
            MessageElement.SetPlacement(Placement.Top);
            MessageService?.Show(new MessageOption()
            {
                Host = MessageElement,
                Content = "这是一条提示消息",
                Icon = "fa fa-info-circle",
                ShowBar = true,
            });
        }

        private void ShowColorMessage(Color color)
        {
            MessageElement.SetPlacement(Placement.Top);
            MessageService?.Show(new MessageOption()
            {
                Host = MessageElement,
                Content = "这是带颜色的消息",
                Icon = "fa fa-info-circle",
                Color = color
            });
        }

        private void ShowBottomMessage()
        {
            MessageElement.SetPlacement(Placement.Bottom);
            MessageService?.Show(new MessageOption()
            {
                Host = MessageElement,
                Content = "这是一条提示消息",
                Icon = "fa fa-info-circle",
            });
        }

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

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private 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"
            }
        };
    }
}