@page "/transitions"
@inject IStringLocalizer<Transitions> Localizer

<h3>Transition effect</h3>
<h4>BootstarpBlazor applies the transition animation to some components, you can also use it directly.</h4>

<DemoBlock Title="Basic usage" Introduction="Demonstration of basic animation effects" Name="Normal">
    <Button Color="Color.Primary" OnClick="OnShow" Text="FadeOut" />
    <Transition TransitionType="TransitionType.FadeOut" Show="Show" OnTransitionEnd="OnShowEnd">
        <div class="my-3">FadeOut</div>
    </Transition>
</DemoBlock>

<DemoBlock Title="Animation execution complete callback" Introduction="Execute the callback function after the animation is completed" Name="EndCallback">
    <Button Color="Color.Primary" OnClick="OnTransitionShow" Text="FadeOut"></Button>
    <Transition TransitionType="TransitionType.FadeOut" Show="TransitionEndShow" OnTransitionEnd="OnTransitionEndShow">
        <div class="my-3">FadeOut</div>
    </Transition>
    <BlockLogger @ref="Trace" />
</DemoBlock>

<DemoBlock Title="Set animation duration" Introduction="Control the animation duration in milliseconds by setting the <code>Duration</code> parameter" Name="Duration">
    <Button Color="Color.Primary" OnClick="OnFadeInShow" Text="FadeIn"></Button>
    <Transition TransitionType="TransitionType.FadeIn" Show="FadeInShow" Duration="3000" OnTransitionEnd="OnFadeInEndShow">
        <div class="my-3">FadeIn</div>
    </Transition>
</DemoBlock>

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

// 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 partial class Transitions
{
    private bool Show { get; set; }

    [NotNull]
    private BlockLogger? Trace { get; set; }

    private void OnShow()
    {
        Show = true;
    }

    private Task OnShowEnd()
    {
        Show = false;
        StateHasChanged();
        return Task.CompletedTask;
    }

    private bool TransitionEndShow { get; set; }

    private void OnTransitionShow()
    {
        TransitionEndShow = true;
    }

    private Task OnTransitionEndShow()
    {
        TransitionEndShow = false;
        Trace.Log("animation ends");
        StateHasChanged();
        return Task.CompletedTask;
    }

    private bool FadeInShow { get; set; }

    private void OnFadeInShow()
    {
        FadeInShow = true;
    }

    private Task OnFadeInEndShow()
    {
        FadeInShow = false;
        StateHasChanged();
        return Task.CompletedTask;
    }

    private static IEnumerable<AttributeItem> GetAttributes() => new[]
    {
            new AttributeItem() {
                Name = "TransitionType",
                Description = "Animation effect name",
                Type = "TransitionType",
                ValueList = " — ",
                DefaultValue = "FadeIn"
            },
            new AttributeItem() {
                Name = "Show",
                Description = "Control animation execution",
                Type = "Boolean",
                ValueList = "true|false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "Duration",
                Description = "Control animation duration",
                Type = "int",
                ValueList = " — ",
                DefaultValue = "0"
            },
            new AttributeItem() {
                Name = "OnTransitionEnd",
                Description = "Animation execution complete callback",
                Type = "Func<Task>",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
}