@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> template <code>CollapseItems is set by conditional logic" Name="Items">
    @if (State)
    {
        <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" 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>
            </CollapseItems>
        </Collapse>
    }
    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>
    }
    <Button Text="Toggle" OnClick="OnToggle" class="mt-3" />
</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/

using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Components;

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"
            }
    };
}