@page "/tags"
@inject IStringLocalizer<Tags> Localizer

<h3>Tag</h3>

<h4>Used for marking and selection.</h4>

<DemoBlock Title="Basic usage" Introduction="Non floating elements in the page will not disappear automatically." Name="Normal">
        <div class="row g-3">
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Primary">Label I</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Secondary">Label II</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Success">Label III</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Danger">Label IV</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Warning">Label V</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Info">Label VI</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Dark">Label VII</Tag>
            </div>
        </div>
</DemoBlock>

<DemoBlock Title="Close button" Introduction="Provides a label for the close button" Name="CloseButton">
        <div class="row g-3">
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Primary" ShowDismiss="true" OnDismiss="@DismissClick">Label I</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Secondary" ShowDismiss="true" OnDismiss="@DismissClick">Label II</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Success" ShowDismiss="true" OnDismiss="@DismissClick">Label III</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Danger" ShowDismiss="true" OnDismiss="@DismissClick">Label IV</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Warning" ShowDismiss="true" OnDismiss="@DismissClick">Label V</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Info" ShowDismiss="true" OnDismiss="@DismissClick">Label VI</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Color="Color.Dark" ShowDismiss="true" OnDismiss="@DismissClick">Label VII</Tag>
            </div>
        </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="With Icon" Introduction="Improve readability when representing a state." Name="Icon">
        <div class="row g-3">
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-check-circle" Color="Color.Success">Label I</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-warning" Color="Color.Warning">Label II</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-question-circle" Color="Color.Info">Label III</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-times-circle" Color="Color.Danger">Label IV</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-angle-left" Color="Color.Primary">Label V</Tag>
            </div>
            <div class="col-4 col-sm-auto">
                <Tag Icon="fa fa-fw fa-user" Color="Color.Dark">Label VI</Tag>
            </div>
        </div>
</DemoBlock>

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

<EventTable Items="@GetEvents()" />

// 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.Shared.Common;
using BootstrapBlazor.Shared.Components;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Tags
{
    [NotNull]
    private BlockLogger? Trace { get; set; }

    /// <summary>
    /// 
    /// </summary>
    private Task DismissClick()
    {
        Trace.Log($"Tag Dismissed");
        return Task.CompletedTask;
    }

    /// <summary>
    /// 获得事件方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<EventItem> GetEvents() => new EventItem[]
    {
            new EventItem()
            {
                Name = "OnDismiss",
                Description = Localizer["OnDismiss"],
                Type ="EventCallback<MouseEventArgs>"
            }
    };

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "ChildContent",
                Description = Localizer["ChildContent"],
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Class",
                Description = Localizer["Class"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Color",
                Description = Localizer["Color"],
                Type = "Color",
                ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
                DefaultValue = "Primary"
            },
            new AttributeItem() {
                Name = "Icon",
                Description = Localizer["Icon"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ShowDismiss",
                Description = Localizer["ShowDismiss"],
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            }
    };
}