@page "/drawers"

<h3>Drawer 抽屉</h3>

<h4>有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验</h4>

<DemoBlock Title="基本用法" Introduction="呼出一个临时的侧边栏, 可以从多个方向呼出" Name="Normal">
    <p class="d-flex flex-wrap drawer-demo">
        <RadioList TValue="SelectedItem" Items="@DrawerDirection" OnSelectedChanged="@OnStateChanged" />
    </p>
    <p>
        <button type="button" class="btn btn-primary" @onclick="@(e => IsOpen = true)">点我打开</button>
    </p>
    <Drawer Placement="@DrawerAlign" IsOpen="@IsOpen">
        <div class="d-flex justify-content-center align-items-center flex-column" style="height: 290px;">
            <p>抽屉内布局、组件等完全可以自定义</p>
            <button type="button" class="btn btn-primary" @onclick="@(e => IsOpen = false)">关闭抽屉</button>
        </div>
    </Drawer>
</DemoBlock>

<DemoBlock Title="点击遮罩关闭" Introduction="通过设置 <code>IsBackdrop</code> 属性为 <code>true</code>，点击遮罩部分时自动关闭抽屉" Name="Placement">
    <p>
        <button type="button" class="btn btn-primary" @onclick="@OpenDrawer">点我打开</button>
    </p>
    <Drawer Placement="Placement.Left" @bind-IsOpen="@IsBackdropOpen" IsBackdrop="true">
        <p class="mt-3 text-center">
            点击遮罩阴影部分自动关闭抽屉
        </p>
    </Drawer>
</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;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Drawers
{
    private IEnumerable<SelectedItem> DrawerDirection { get; } = new SelectedItem[] {
            new SelectedItem("left", "从左向右") { Active = true },
            new SelectedItem("right", "从右向左"),
            new SelectedItem("top", "从上到下"),
            new SelectedItem("bottom", "从下向上")
        };

    private Placement DrawerAlign { get; set; }

    private Task OnStateChanged(IEnumerable<SelectedItem> values, SelectedItem val)
    {
        DrawerAlign = val.Value switch
        {
            "right" => Placement.Right,
            "top" => Placement.Top,
            "bottom" => Placement.Bottom,
            _ => Placement.Left
        };
        IsOpen = false;
        StateHasChanged();
        return Task.CompletedTask;
    }

    private bool IsOpen { get; set; }

    private bool IsBackdropOpen { get; set; }

    private void OpenDrawer()
    {
        IsBackdropOpen = true;
    }

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Width",
                Description = "抽屉宽度",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "360px"
            },
            new AttributeItem() {
                Name = "Height",
                Description = "抽屉高度",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "290px"
            },
            new AttributeItem() {
                Name = "IsOpen",
                Description = "抽屉是否打开",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsBackdrop",
                Description = "点击遮罩是否关闭抽屉",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "OnClickBackdrop",
                Description = "点击背景遮罩时回调委托方法",
                Type = "Action",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Placement",
                Description = "组件出现位置",
                Type = "Placement",
                ValueList = "Left|Right|Top|Bottom",
                DefaultValue = "Left"
            },
            new AttributeItem() {
                Name = "ChildContent",
                Description = "子组件",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
    };
}