@page "/drawers"

<h3>Drawer</h3>
<h4>Sometimes, the Dialog component does not meet our needs. For example, your form is very long, or you need to temporarily display some documents. Drawer has almost the same API as Dialog, which brings a different experience to the UI.</h4>

<DemoBlock Title="Basic usage" Introduction="Call out a temporary sidebar that can be called out from multiple directions" 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)">click me to open</button>
    </p>
    <Drawer Placement="@DrawerAlign" IsOpen="@IsOpen">
        <div class="d-flex justify-content-center align-items-center flex-column" style="height: 290px;">
            <p>The layout, components, etc. in the drawer are fully customizable</p>
            <button type="button" class="btn btn-primary" @onclick="@(e => IsOpen = false)">close the drawer</button>
        </div>
    </Drawer>
</DemoBlock>

<DemoBlock Title="Click to close the mask" Introduction="By setting the <code>IsBackdrop</code> property to <code>true</code>, the drawer is automatically closed when the mask part is clicked" Name="Placement">
    <p>
        <button type="button" class="btn btn-primary" @onclick="@OpenDrawer">click me to open</button>
    </p>
    <Drawer Placement="Placement.Left" @bind-IsOpen="@IsBackdropOpen" IsBackdrop="true">
        <p class="mt-3 text-center">
            Click on the shaded part of the mask to automatically close the drawer
        </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/

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Drawers
{
    [Inject]
    [NotNull]
    private IStringLocalizer<Drawers>? Localizer { get; set; }

    private IEnumerable<SelectedItem> DrawerDirection { get; } = new SelectedItem[] {
        new SelectedItem("left", "left to right") { Active = true },
        new SelectedItem("right", "right to left"),
        new SelectedItem("top", "top to bottom"),
        new SelectedItem("bottom", "bottom to top")
    };

    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>
    /// Get property method
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = "Width",
            Description = "drawer width",
            Type = "string",
            ValueList = " — ",
            DefaultValue = "360px"
        },
        new AttributeItem() {
            Name = "Height",
            Description = "drawer height",
            Type = "string",
            ValueList = " — ",
            DefaultValue = "290px"
        },
        new AttributeItem() {
            Name = "IsOpen",
            Description = "Is the drawer open?",
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "IsBackdrop",
            Description = "Whether click on the mask closes the drawer",
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "OnClickBackdrop",
            Description = "Callback delegate method when background mask is clicked",
            Type = "Action",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "Placement",
            Description = "Where the component appears",
            Type = "Placement",
            ValueList = "Left|Right|Top|Bottom",
            DefaultValue = "Left"
        },
        new AttributeItem() {
            Name = "ChildContent",
            Description = "Subassembly",
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        }
    };
}