<div class="row g-3">
    <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
        <Light></Light>
    </div>
    <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
        <Light Color="Color.Danger"></Light>
    </div>
    <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
        <Light Color="Color.Info"></Light>
    </div>
    <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
        <Light Color="Color.Warning"></Light>
    </div>
    <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
        <Light Color="Color.Primary"></Light>
    </div>
    <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
        <Light Color="Color.Secondary"></Light>
    </div>
    <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
        <Light Color="Color.Dark"></Light>
    </div>
</div>

<div class="row g-3">
    <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
        <Light IsFlash="true"></Light>
    </div>
    <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
        <Light Color="Color.Danger" IsFlash="true"></Light>
    </div>
    <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
        <Light Color="Color.Info" IsFlash="true"></Light>
    </div>
    <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
        <Light Color="Color.Warning" IsFlash="true"></Light>
    </div>
    <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
        <Light Color="Color.Primary" IsFlash="true"></Light>
    </div>
    <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
        <Light Color="Color.Secondary" IsFlash="true"></Light>
    </div>
    <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
        <Light Color="Color.Dark" IsFlash="true"></Light>
    </div>
</div>

@implements IDisposable

<div class="row g-3">
    <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
        <Light IsFlash="true" Color="@Color"></Light>
    </div>
</div>

@code { 
    private Color Color { get; set; } = Color.Primary;

    private CancellationTokenSource UpdateColorTokenSource { get; } = new CancellationTokenSource();

    /// <summary>
    /// OnAfterRender
    /// </summary>
    /// <param name="firstRender"></param>
    /// <returns></returns>
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        try
        {
            await Task.Delay(2000, UpdateColorTokenSource.Token);
            Color = Color switch
            {
                Color.Primary => Color.Success,
                Color.Success => Color.Info,
                Color.Info => Color.Warning,
                Color.Warning => Color.Danger,
                Color.Danger => Color.Secondary,
                _ => Color.Primary
            };
            StateHasChanged();
        }
        catch (TaskCanceledException)
        {

        }
    }

    /// <summary>
    /// Dispose
    /// </summary>
    protected virtual void Dispose(bool disposing)
    {
        if (disposing)
        {
            UpdateColorTokenSource.Cancel();
            UpdateColorTokenSource.Dispose();
        }
    }

    /// <summary>
    /// Dispose
    /// </summary>
    public void Dispose()
    {
        Dispose(true);
        GC.SuppressFinalize(this);
    }
}

@inject IStringLocalizer<LightsTooltipText> Localizer

<div class="row g-3">
    <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
        <Light Color="Color.Danger" TooltipText="@Title"></Light>
    </div>
    <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
        <Button Text="Remove Tooltip" OnClick="OnRemoveTitle"></Button>
    </div>
    <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
        <Button Text="Set Tooltip" OnClick="OnSetTitle"></Button>
    </div>
</div>

@code {
    [NotNull]
    private string? Title { get; set; }

    private void OnSetTitle()
    {
        Title = Localizer["TooltipText"];
    }

    private void OnRemoveTitle()
    {
        Title = "";
    }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Title = Localizer["TooltipText"];
    }
}