@page "/toasts"
@inject IStringLocalizer<Toasts> Localizer
@inject ToastService ToastService
@inject IJSRuntime JSRuntime

<h3>Toast Lightweight Popup</h3>
<h4>Provides a lightweight toast popup</h4>

<p>Component usage introduction：</p>

<p class="code-label">1. Inject service <code>ToastService</code></p>
<Pre>@inject ToastService ToastService</Pre>
<Pre>[Inject]
[NotNull]
private ToastService? ToastService { get; set; }
</Pre>
<p class="code-label">2. Call its instance <code>api</code></p>
<Pre>await ToastService.Success("Title", "Content", autoHide: true);</Pre>

<DemoBlock Title="Basic usage" Introduction="When the user operates, the lower right corner will give appropriate prompt information" Name="Normal">
    <div class="row g-3 overflow-hidden">
        <div class="col-12 col-lg-6 col-xl-3">
            <Toast class="d-toast show" Options="@Options1" />
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <Toast class="d-toast show" Options="@Options2" />
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <Toast class="d-toast show" Options="@Options3" />
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <Toast class="d-toast show" Options="@Options4" />
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <Button Color="Color.Success" Icon="fa-solid fa-circle-check" OnClick="@OnSuccessClick" Text="Success notification"></Button>
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <Button Color="Color.Danger" Icon="fa-solid fa-circle-xmark" OnClick="@OnErrorClick" Text="Failure notification"></Button>
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <Button Color="Color.Info" Icon="fa-solid fa-circle-exclamation" OnClick="@OnInfoClick" Text="Information notice"></Button>
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <Button Color="Color.Warning" Icon="fa-solid fa-triangle-exclamation" OnClick="@OnWarningClick" Text="Warning notice"></Button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Toast is closed manually" Introduction="It will not close automatically, you need to manually click the close button" Name="Close">
    <Button Icon="fa-solid fa-triangle-exclamation" OnClick="@OnNotAutoHideClick" Text="success notification"></Button>
</DemoBlock>

<DemoBlock Title="No header" Introduction="Set <code>ShowHeader="false"</code> remove <code>Header</code>" Name="ShowHeader">
    <Button Icon="fa-solid fa-circle-exclamation" OnClick="@OnShowHeaderClick" Text="Toast"></Button>
</DemoBlock>

<DemoBlock Title="Custom header" Introduction="set <code>HeaderTemplate</code> custom the header content" Name="HeaderTemplate">
    <Button Icon="fa-solid fa-circle-exclamation" OnClick="@OnHeaderTemplateClick" Text="Toast"></Button>
</DemoBlock>

<DemoBlock Title="Toast display location" Introduction="Provides settings where the Toast popup appears" Name="Position">
    <p>Set the location where the popup appears by setting the <code>Placement</code> value of the <code>Toast</code> component. The default value is <code>BottomEnd</code>. upper right corner</p>
    <div class="row g-3 row-cols-3">
        <div class="col">
            <Button OnClick="e => OnPlacementClick(Placement.TopStart)">Top Start</Button>
        </div>
        <div class="col">
            <Button OnClick="e => OnPlacementClick(Placement.TopCenter)">Top Center</Button>
        </div>
        <div class="col">
            <Button OnClick="e => OnPlacementClick(Placement.TopEnd)">Top End</Button>
        </div>
        <div class="col">
            <Button OnClick="e => OnPlacementClick(Placement.MiddleStart)">Middle Start</Button>
        </div>
        <div class="col">
            <Button OnClick="e => OnPlacementClick(Placement.MiddleCenter)">Middle Center</Button>
        </div>
        <div class="col">
            <Button OnClick="e => OnPlacementClick(Placement.MiddleEnd)">Middle End</Button>
        </div>
        <div class="col">
            <Button OnClick="e => OnPlacementClick(Placement.BottomStart)">Bottom Start</Button>
        </div>
        <div class="col">
            <Button OnClick="e => OnPlacementClick(Placement.BottomCenter)">Bottom Center</Button>
        </div>
        <div class="col">
            <Button OnClick="e => OnPlacementClick(Placement.BottomEnd)">Bottom End</Button>
        </div>
    </div>
</DemoBlock>

<h4>pay attention</h4>

<p>This component provides functions in the form of injection services, and the user experience is very comfortable when used, and can be called anytime, anywhere <br/>The injection service provides the following shortcut invocation methods:</p>

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

<p>Examples are as follows：</p>

<Pre>ToastService?.Success("Successfully saved", "Save data successfully, automatically close after 4 seconds");</Pre>

<Pre>private void OnInfoClick()
{
    ToastService.Show(new ToastOption()
    {
        // Notification category
        Category = ToastCategory.Information,

        // Notification box Title value
        Title = "notification",

        // Notification body content
        Content = "The system adds new components, it will automatically shut down after 4 seconds"
    });
}</Pre>

<Tips>Special Note: The <code>Delay</code> parameter value of the <code>Toast</code> component in the entire system can be set through the <code>BootstrapBlazorOptions</code> global unified configuration parameter</Tips>

    <p>Configured through the configuration file <code>appsetting.json</code> file, suitable for <code>Server-Side App</code></p>

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

<p>Configured via the <code>ConfigureServices</code> method in the <code>Startup</code> file for <code>Server-Side App</code> and <code>WebAssembly App</code></p>

<Pre>public void ConfigureServices(IServiceCollection services)
{
    // Uniformly set the automatic disappearance time of the Toast component
    services.Configure<BootstrapBlazorOptions>(options =>
    {
        options.ToastDelay = 4000;
    });
}
</Pre>

<div class="mb-3">Or, for <code>Server-Side App</code> only</div>

<Pre>public void ConfigureServices(IServiceCollection services)
{
    // Add BootstrapBlazor component
    services.AddBootstrapBlazor(options =>
    {
        // Uniformly set the automatic disappearance time of the Toast component
        options.ToastDelay = 4000;
    });
}</Pre>

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

@code {
    RenderFragment RenderHeader =>
    @<div class="d-flex flex-fill pe-3">
        <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
    </div>;
}

// 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 Microsoft.JSInterop;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// Toasts
/// </summary>
public sealed partial class Toasts
{
    [NotNull]
    private ToastContainer? ToastContainer { 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 = "Save data", IsAutoHide = false, Content = "Save data successfully, automatically close after 4 seconds" };
        Options2 = new ToastOption { Category = ToastCategory.Error, Title = "Save data", IsAutoHide = false, Content = "Save data successfully, automatically close after 4 seconds" };
        Options3 = new ToastOption { Category = ToastCategory.Information, Title = "Prompt information", IsAutoHide = false, Content = "Information prompt pop-up window, automatically closes after 4 seconds" };
        Options4 = new ToastOption { Category = ToastCategory.Warning, Title = "Warning message", IsAutoHide = false, Content = "Information prompt pop-up window, automatically closes after 4 seconds" };

        ToastContainer = Root.ToastContainer;
    }

    private async Task OnPlacementClick(Placement placement)
    {
        ToastContainer.SetPlacement(placement);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Information,
            Title = "Notification",
            Content = "<b>Toast</b> The component has changed position, it will automatically shut down after 4 seconds"
        });
    }

    private async Task OnSuccessClick()
    {
        ToastContainer.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Success,
            Title = "Successfully saved",
            Content = "Save data successfully, automatically close after 4 seconds"
        });
    }

    private async Task OnErrorClick()
    {
        ToastContainer.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Error,
            Title = "Failed to save",
            Content = "Failed to save data, automatically closes after 4 seconds"
        });
    }

    private async Task OnInfoClick()
    {
        ToastContainer.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Information,
            Title = "Notification",
            Content = "The system adds new components, it will automatically shut down after 4 seconds"
        });
    }

    private async Task OnWarningClick()
    {
        ToastContainer.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Warning,
            Title = "Warning",
            Content = "If the system finds abnormality, please deal with it in time, and it will automatically shut down after 4 seconds"
        });
    }

    private async Task OnNotAutoHideClick()
    {
        ToastContainer.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Warning,
            IsAutoHide = false,
            Title = "Notification",
            Content = "I will not close automatically, please click the close button in the upper right corner"
        });
    }

    private async Task OnShowHeaderClick()
    {
        ToastContainer.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Warning,
            ShowHeader = false,
            Content = "The system adds new components, it will automatically shut down after 4 seconds"
        });
    }

    private async Task OnHeaderTemplateClick()
    {
        ToastContainer.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Information,
            HeaderTemplate = RenderHeader,
            Content = "The system adds new components, it will automatically shut down after 4 seconds"
        });
    }

    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = "Category",
            Description = Localizer["AttrCategory"],
            Type = "ToastCategory",
            ValueList = "Success/Information/Error/Warning",
            DefaultValue = "Success"
        },
        new AttributeItem() {
            Name = "Title",
            Description = Localizer["AttrTitle"],
            Type = "string",
            ValueList = "—",
            DefaultValue = ""
        },
        new AttributeItem() {
            Name = "Cotent",
            Description = Localizer["AttrCotent"],
            Type = "string",
            ValueList = "—",
            DefaultValue = ""
        },
        new AttributeItem() {
            Name = "Delay",
            Description = Localizer["AttrDelay"],
            Type = "int",
            ValueList = "—",
            DefaultValue = "4000"
        },
        new AttributeItem() {
            Name = "IsAutoHide",
            Description = Localizer["AttrIsAutoHide"],
            Type = "boolean",
            ValueList = "",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "IsHtml",
            Description = Localizer["AttrIsHtml"],
            Type = "boolean",
            ValueList = "",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "Placement",
            Description = Localizer["AttrPlacement"],
            Type = "Placement",
            ValueList = "Auto / Top / Left / Bottom / Right",
            DefaultValue = "Auto"
        }
    };
}