@page "/collapses"
@inject IStringLocalizer<Collapses> Localizer

<h3>Collapse</h3>

<h4>The content area is contained by the collapsed panel</h4>

<DemoBlock Title="Basic usage" Introduction="Multiple panels can be expanded at the same time, with no effect between panels" Name="Normal">
    <Collapse OnCollapseChanged="@OnChanged">
        <CollapseItems>
            <CollapseItem Text="Consistency">
                <div>Consistent with real life: consistent with real-life processes, logic, follow the user's habits of language and concepts;</div>
                <div>Consistent in the interface: All elements and structures need to be consistent, such as design styles, icons and text, the location of elements, and so on.</div>
            </CollapseItem>
            <CollapseItem Text="Feedback" IsCollapsed="false">
                <div>Control feedback: through the interface style and interactive effect so that users can clearly perceive their own actions;</div>
                <div>Page feedback: After the operation, the current state is clearly represented by changes in the page elements.</div>
            </CollapseItem>
            <CollapseItem Text="Efficiency">
                <div>Simplify the process: design simple and intuitive operating process;</div>
                <div>Clear and clear: clear language and clear expression, so that users quickly understand and then make decisions;</div>
                <div>Help users identify: The interface is straightforward, allowing users to quickly identify rather than recall, reducing the user's memory burden.</div>
            </CollapseItem>
            <CollapseItem Text="Controllability">
                <div>User decision-making: according to the scene can give the user action advice or security tips, but can not replace the user to make decisions;</div>
                <div>Results controllable: Users are free to perform actions, including undoing, falling back, and terminating the current operation.</div>
            </CollapseItem>
        </CollapseItems>
    </Collapse>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Accordion effect" Introduction="Only one panel can be expanded at a time" Name="Accordion">
    <Collapse IsAccordion="true">
        <CollapseItems>
            <CollapseItem Text="Consistency">
                <div>Consistent with real life: consistent with real-life processes, logic, follow the user's habits of language and concepts;</div>
                <div>Consistent in the interface: All elements and structures need to be consistent, such as design styles, icons and text, the location of elements, and so on.</div>
            </CollapseItem>
            <CollapseItem Text="Feedback">
                <div>Control feedback: through the interface style and interactive effect so that users can clearly perceive their own actions;</div>
                <div>Page feedback: After the operation, the current state is clearly represented by changes in the page elements.</div>
            </CollapseItem>
            <CollapseItem Text="Efficiency">
                <div>Simplify the process: design simple and intuitive operating process;</div>
                <div>Clear and clear: clear language and clear expression, so that users quickly understand and then make decisions;</div>
                <div>Help users identify: The interface is straightforward, allowing users to quickly identify rather than recall, reducing the user's memory burden.</div>
            </CollapseItem>
            <CollapseItem Text="Controllability">
                <div>User decision-making: according to the scene can give the user action advice or security tips, but can not replace the user to make decisions;</div>
                <div>Results controllable: Users are free to perform actions, including undoing, falling back, and terminating the current operation.</div>
            </CollapseItem>
        </CollapseItems>
    </Collapse>
</DemoBlock>

<DemoBlock Title="The child title color" Introduction="Each panel sets a different color" Name="Color">
    <Collapse IsAccordion="true">
        <CollapseItems>
            <CollapseItem Text="Consistency" TitleColor="Color.Primary">
                <div>Consistent with real life: consistent with real-life processes, logic, follow the user's habits of language and concepts;</div>
                <div>Consistent in the interface: All elements and structures need to be consistent, such as design styles, icons and text, the location of elements, and so on.</div>
            </CollapseItem>
            <CollapseItem Text="Feedback" TitleColor="Color.Info">
                <div>Control feedback: through the interface style and interactive effect so that users can clearly perceive their own actions;</div>
                <div>Page feedback: After the operation, the current state is clearly represented by changes in the page elements.</div>
            </CollapseItem>
            <CollapseItem Text="Efficiency" TitleColor="Color.Success">
                <div>Simplify the process: design simple and intuitive operating process;</div>
                <div>Clear and clear: clear language and clear expression, so that users quickly understand and then make decisions;</div>
                <div>Help users identify: The interface is straightforward, allowing users to quickly identify rather than recall, reducing the user's memory burden.</div>
            </CollapseItem>
            <CollapseItem Text="Controllability" TitleColor="Color.Warning">
                <div>User decision-making: according to the scene can give the user action advice or security tips, but can not replace the user to make decisions;</div>
                <div>Results controllable: Users are free to perform actions, including undoing, falling back, and terminating the current operation.</div>
            </CollapseItem>
        </CollapseItems>
    </Collapse>
</DemoBlock>

<DemoBlock Title="Dynamic updates" Introduction="The <code>CollapseItems</code> is set by conditional logic" Name="Items">
    <Collapse>
        <CollapseItems>
            @if (State)
            {
                <CollapseItem Text="Consistency">
                    <div>Consistent with real life: consistent with real-life processes, logic, follow the user's habits of language and concepts;</div>
                    <div>Consistent in the interface: All elements and structures need to be consistent, such as design styles, icons and text, the location of elements, and so on.</div>
                </CollapseItem>
                <CollapseItem Text="Feedback" IsCollapsed="false">
                    <div>Control feedback: through the interface style and interactive effect so that users can clearly perceive their own actions;</div>
                    <div>Page feedback: After the operation, the current state is clearly represented by changes in the page elements.</div>
                </CollapseItem>
            }
            else
            {
                <Collapse>
                    <CollapseItems>
                        <CollapseItem Text="Consistency">
                            <div>Consistent with real life: consistent with real-life processes, logic, follow the user's habits of language and concepts;</div>
                            <div>Consistent in the interface: All elements and structures need to be consistent, such as design styles, icons and text, the location of elements, and so on.</div>
                        </CollapseItem>
                        <CollapseItem Text="Feedback">
                            <div>Control feedback: through the interface style and interactive effect so that users can clearly perceive their own actions;</div>
                            <div>Page feedback: After the operation, the current state is clearly represented by changes in the page elements.</div>
                        </CollapseItem>
                        <CollapseItem Text="Efficiency">
                            <div>Simplify the process: design simple and intuitive operating process;</div>
                            <div>Clear and clear: clear language and clear expression, so that users quickly understand and then make decisions;</div>
                            <div>Help users identify: The interface is straightforward, allowing users to quickly identify rather than recall, reducing the user's memory burden.</div>
                        </CollapseItem>
                        <CollapseItem Text="Controllability">
                            <div>User decision-making: according to the scene can give the user action advice or security tips, but can not replace the user to make decisions;</div>
                            <div>Results controllable: Users are free to perform actions, including undoing, falling back, and terminating the current operation.</div>
                        </CollapseItem>
                    </CollapseItems>
                </Collapse>
            }
        </CollapseItems>
    </Collapse>
    <Button Text="Toggle" OnClick="OnToggle" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Icon" Introduction="Show icon in header" Name="Icon">
    <Collapse IsAccordion="true">
        <CollapseItems>
            <CollapseItem Text="Consistency" Icon="fa-solid fa-people-roof">
                <div>Consistent with real life: consistent with real-life processes, logic, follow the user's habits of language and concepts;</div>
                <div>Consistent in the interface: All elements and structures need to be consistent, such as design styles, icons and text, the location of elements, and so on.</div>
            </CollapseItem>
            <CollapseItem Text="Feedback" Icon="fa-solid fa-users">
                <div>Control feedback: through the interface style and interactive effect so that users can clearly perceive their own actions;</div>
                <div>Page feedback: After the operation, the current state is clearly represented by changes in the page elements.</div>
            </CollapseItem>
            <CollapseItem Text="Controllability" Icon="fa-solid fa-users-gear">
                <div>User decision-making: according to the scene can give the user action advice or security tips, but can not replace the user to make decisions;</div>
                <div>Results controllable: Users are free to perform actions, including undoing, falling back, and terminating the current operation.</div>
            </CollapseItem>
        </CollapseItems>
    </Collapse>
</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 sealed partial class Collapses
{
    [NotNull]
    private BlockLogger? Trace { get; set; }

    private bool State { get; set; }

    private Task OnChanged(CollapseItem item)
    {
        Trace.Log($"{item.Text}: {item.IsCollapsed}");
        return Task.CompletedTask;
    }

    private void OnToggle()
    {
        State = !State;
    }

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        // TODO: 移动到数据库中
        new AttributeItem() {
            Name = "CollapseItems",
            Description = Localizer["CollapseItems"],
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "IsAccordion",
            Description = Localizer["IsAccordion"],
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "OnCollapseChanged",
            Description = Localizer["OnCollapseChanged"],
            Type = "Func<CollapseItem, Task>",
            ValueList = " — ",
            DefaultValue = " — "
        }
    };
}