@page "/drawers"

<h3>Drawer 抽屉</h3>

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

<Block Title="基本用法" Introduction="呼出一个临时的侧边栏, 可以从多个方向呼出">
    <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>
</Block>

<Block Title="点击遮罩关闭" Introduction="通过设置 <code>IsBackdrop</code> 属性为 <code>true</code>，点击遮罩部分时自动关闭抽屉">
    <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>
</Block>

<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 System.Collections.Generic;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <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 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 = " — "
            },
        };
    }
}