@page "/stepss"
@inject IStringLocalizer<Stepss> Localizer

<h3>Steps</h3>

<h4>A navigation bar that guides the user through the process</h4>

<p>Step-by-step navigation bar that guides the user through the process, setting steps of no less than 2 steps based on the actual scenario</p>

<p><code>Steps</code> component supports UI rendering by setting the <code>Items</code> property or by embedding the <code>Step</code> component directly</p>

<DemoBlock Title="Basic usage" Introduction="Simple step bar, by directly binding the data source <code>Items</code>" Name="Normal">
    <Steps Items="@Items" OnStatusChanged="@OnStatusChanged" />
    <div class="mt-1">
        <Button OnClick="@NextStep" IsOutline="true">Next</Button>
        <Button OnClick="@ResetStep" IsOutline="true">Reset</Button>
    </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Basic usage" Introduction="A simple step bar that uses the <code>Step</code> component setup step directly inside the component" Name="Step">
    <Steps>
        <Step Title="Step 1" Space="25%" Status="StepStatus.Success"></Step>
        <Step Title="Step 2" Space="25%" Status="StepStatus.Process" StepIndex="1"></Step>
        <Step Title="Step 3" Space="25%" Status="StepStatus.Error" StepIndex="2"></Step>
        <Step Title="Step 4" Space="25%" Status="StepStatus.Finish" StepIndex="3"></Step>
        <Step Title="Step 5" Space="25%" StepIndex="4" IsLast="true"></Step>
    </Steps>
</DemoBlock>

<DemoBlock Title="There is a description of the step bar" Introduction="Each step described has its own description bar of step status" Name="Desc">
    <Steps>
        <Step Title="Step 1" Space="33.33%" Status="StepStatus.Finish" Description="This is a long descriptive text"></Step>
        <Step Title="Step 2" Space="33.33%" Status="StepStatus.Process" StepIndex="2" Description="This is a long descriptive text"></Step>
        <Step Title="Step 3" Space="33.33%" StepIndex="3" Description="This is a long descriptive text"></Step>
        <Step Title="Step 4" Space="33.33%" StepIndex="4" IsLast="true" Description="Conclusion"></Step>
    </Steps>
</DemoBlock>

<DemoBlock Title="Center the step bar" Introduction="Both the title and description will be centered" Name="Middle">
    <Steps IsCenter="true">
        <Step Title="Step 1" Space="33.33%" Status="StepStatus.Finish" StepIndex="0" Description="This is a long descriptive text"></Step>
        <Step Title="Step 2" Space="33.33%" Status="StepStatus.Success" StepIndex="1" Description="This is a long descriptive text"></Step>
        <Step Title="Step 3" Space="33.33%" Status="StepStatus.Process" StepIndex="2" Description="This is a long descriptive text"></Step>
        <Step Title="Step 4" Space="33.33%" StepIndex="3" IsLast="true" Description="Conclusion"></Step>
    </Steps>
</DemoBlock>

<DemoBlock Title="Step bar with icon" Introduction="Various custom icons can be enabled within the step bar" Name="TitleCenter">
    <Steps IsCenter="true">
        <Step Title="Step 1" Space="33.33%" IsIcon="true" Icon="fa-solid fa-user" Status="StepStatus.Success" Description="This is a long descriptive text"></Step>
        <Step Title="Step 2" Space="33.33%" IsIcon="true" Icon="fa-solid fa-user-plus" Status="StepStatus.Process" StepIndex="1" Description="This is a long descriptive text"></Step>
        <Step Title="Step 3" Space="33.33%" IsIcon="true" Icon="fa-solid fa-users" StepIndex="2" Description="This is a long descriptive text"></Step>
        <Step Title="Step 4" Space="33.33%" IsIcon="true" Icon="fa-solid fa-user-secret" StepIndex="3" IsLast="true" Description="Conclusion"></Step>
    </Steps>
</DemoBlock>

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

<AttributeTable Title="StepItem Atributes" Items="@GetStepItemAttributes()" />

<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/

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Stepss
{
    private IEnumerable<StepItem> Items { get; set; } = new StepItem[3];

    /// <summary>
    /// OnInitialised method
    /// </summary>
    protected override void OnInitialized()
    {
        Items = new StepItem[3]
        {
            new StepItem() { Title = Localizer["I1Text"], Template = builder => { builder.OpenElement(0, "div"); builder.AddContent(1, Localizer["I1TextC"]); builder.CloseElement(); } },
            new StepItem() { Title = Localizer["I2Text"], Template = builder => { builder.OpenElement(0, "div"); builder.AddContent(1, Localizer["I2TextC"]); builder.CloseElement(); } },
            new StepItem() { Title = Localizer["I3Text"], Template = builder => { builder.OpenElement(0, "div"); builder.AddContent(1, Localizer["I3TextC"]); builder.CloseElement(); } }
        };
    }

    private void NextStep()
    {
        var item = Items.FirstOrDefault(i => i.Status == StepStatus.Process);
        if (item != null)
        {
            item.Status = StepStatus.Success;
            var index = Items.ToList().IndexOf(item) + 1;
            if (index < Items.Count())
            {
                Items.ElementAt(index).Status = StepStatus.Process;
            }
        }
        else
        {
            ResetStep();
            Items.ElementAt(0).Status = StepStatus.Process;
        }
    }

    private void ResetStep()
    {
        Items.ToList().ForEach(i =>
        {
            i.Status = StepStatus.Wait;
        });
    }

    /// <summary>
    /// 
    /// </summary>
    [NotNull]
    private BlockLogger? Trace { get; set; }

    /// <summary>
    /// 
    /// </summary>
    /// <param name="status"></param>
    private Task OnStatusChanged(StepStatus status)
    {
        Trace.Log($"Steps Status: {status}");
        return Task.CompletedTask;
    }

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            new AttributeItem() {
                Name = "Items",
                Description = Localizer["Desc1"],
                Type = "IEnumerable<StepItem>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "IsVertical",
                Description = Localizer["Desc2"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsCenter",
                Description = Localizer["Desc3"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "Status",
                Description = Localizer["Desc4"],
                Type = "StepStatus",
                ValueList = "Wait|Process|Finish|Error|Success",
                DefaultValue = "Wait"
            }
    };

    private IEnumerable<AttributeItem> GetStepItemAttributes() => new AttributeItem[]
    {
            new AttributeItem() {
                Name = "IsCenter",
                Description = Localizer["Att1"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsIcon",
                Description = Localizer["Att2"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsLast",
                Description = Localizer["Att3"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "StepIndex",
                Description = Localizer["Att4"],
                Type = "int",
                ValueList = " — ",
                DefaultValue = "0"
            },
            new AttributeItem() {
                Name = "Space",
                Description = Localizer["Att5"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = "—"
            },
            new AttributeItem() {
                Name = "Title",
                Description = Localizer["Att6"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Icon",
                Description = Localizer["Att7"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Description",
                Description = Localizer["Att8"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Status",
                Description = Localizer["Att9"],
                Type = "StepStatus",
                ValueList = "Wait|Process|Finish|Error|Success",
                DefaultValue = "Wait"
            },
            new AttributeItem() {
                Name = "Template",
                Description = Localizer["Att10"],
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            }
    };

    private IEnumerable<EventItem> GetEvents() => new List<EventItem>()
        {
            new EventItem()
            {
                Name = "OnStatusChanged",
                Description = Localizer["Event1"],
                Type ="Func<StepStatus, Task>"
            }
        };
}