@page "/messages"
@inject IStringLocalizer<Messages> Localizer

<h3>Message prompt</h3>
<h4>Often used for feedback prompts after active operations. The difference from Toast is that the latter is more passive reminder for system-level notifications</h4>

<p>Component usage introduction：</p>

<p class="code-label">1. Inject service <code>MessageService</code></p>
<Pre>@inject MessageService MessageService</Pre>
<Pre>[Inject]
[NotNull]
private MessageService? MessageService { get; set; }
</Pre>
<p class="code-label">2. call its instance <code>api</code></p>
<Pre>await MessageService.Show(new MessageOption()
{
    Content = "This is a reminder message"
});</Pre>

<DemoBlock Title="Basic usage" Introduction="Appears from the top and automatically disappears after 4 seconds" Name="Normal">
    <button class="btn btn-primary" @onclick="@ShowMessage">Open the message prompt</button>
</DemoBlock>

<DemoBlock Title="message box with icon" Introduction="Change the small icon on the left side of the message box by setting the <code>Icon</code> property of <code>MessageOption</code>" Name="Icon">
    <button class="btn btn-primary" @onclick="@ShowIconMessage">Open the message prompt</button>
</DemoBlock>

<DemoBlock Title="message box with close button" Introduction="Change the close button to appear on the right side of the message box by setting the <code>ShowDismiss</code> property of <code>MessageOption</code>" Name="CloseButton">
    <button class="btn btn-primary" @onclick="@ShowCloseMessage">Open the message prompt</button>
</DemoBlock>

<DemoBlock Title="message box with border on the left" Introduction="Change the left border style of the message box by setting the <code>ShowBar</code> property of <code>MessageOption</code>" Name="LeftBoard">
    <button class="btn btn-primary" @onclick="@ShowBarMessage">Open the message prompt</button>
</DemoBlock>

<DemoBlock Title="message boxes in different colors" Introduction="Change the message box color by setting the <code>Color</code> property of <code>MessageOption</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 message</button>
        </div>
        <div class="col-6 col-sm-auto">
            <button class="btn btn-success" @onclick="@(e => ShowColorMessage(Color.Success))">success message</button>
        </div>
        <div class="col-6 col-sm-auto">
            <button class="btn btn-info" @onclick="@(e => ShowColorMessage(Color.Info))">Info message</button>
        </div>
        <div class="col-6 col-sm-auto">
            <button class="btn btn-danger" @onclick="@(e => ShowColorMessage(Color.Danger))">Danger message</button>
        </div>
        <div class="col-6 col-sm-auto">
            <button class="btn btn-warning" @onclick="@(e => ShowColorMessage(Color.Warning))">Warning message</button>
        </div>
        <div class="col-6 col-sm-auto">
            <button class="btn btn-secondary" @onclick="@(e => ShowColorMessage(Color.Secondary))">Secondary message</button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="message box pop-up location" Introduction="Specify the <code>Message</code> component that has set the bottom display position by setting the component parameter of the <code>MessageService</code> service" Name="Position">
    <button class="btn btn-primary" @onclick="@ShowBottomMessage">Open the message prompt</button>
    <Message @ref="Message" Placement="Placement.Bottom" />
</DemoBlock>

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

<AttributeTable Title="MessageItem property" 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/

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 = "This is a reminder message"
        });
    }

    private async Task ShowIconMessage()
    {
        await MessageService.Show(new MessageOption()
        {
            Content = "This is a reminder message",
            Icon = "fa-solid fa-circle-info"
        });
    }

    private async Task ShowCloseMessage()
    {
        await MessageService.Show(new MessageOption()
        {
            Content = "This is a reminder message",
            Icon = "fa-solid fa-circle-info",
            ShowDismiss = true,
        });
    }

    private async Task ShowBarMessage()
    {
        await MessageService.Show(new MessageOption()
        {
            Content = "This is a reminder message",
            Icon = "fa-solid fa-circle-info",
            ShowBar = true,
        });
    }

    private async Task ShowColorMessage(Color color)
    {
        await MessageService.Show(new MessageOption()
        {
            Content = "This is a colored message",
            Icon = "fa-solid fa-circle-info",
            Color = color
        });
    }

    private async Task ShowBottomMessage()
    {
        await MessageService.Show(new MessageOption()
        {
            Content = "This is a reminder message",
            Icon = "fa-solid fa-circle-info",
        }, Message);
    }

    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = "Placement",
            Description = "message popup location",
            Type = "Placement",
            ValueList = "Top|Bottom",
            DefaultValue = "Top"
        }
    };

    /// <summary>
    /// get property method
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<AttributeItem> GetMessageItemAttributes() => new AttributeItem[]
    {
            new AttributeItem() {
                Name = "ChildContent",
                Description = "Content",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Class",
                Description = "Style",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Color",
                Description = "Color",
                Type = "Color",
                ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
                DefaultValue = "Primary"
            },
            new AttributeItem() {
                Name = "Icon",
                Description = "Icon",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ShowDismiss",
                Description = "Show close button",
                Type = "bool",
                ValueList = " — ",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ShowBar",
                Description = "Whether to show the left Bar",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            }
    };
}