@page "/searchdialogs"
@inject IStringLocalizer<SearchDialogs> Localizer

<h3>SearchDialog search popup</h3>
<h4>Automatically render search popups by binding the data model</h4>

<p><code>SearchDialog</code> component is <code>Dialog</code> An extension of the component, suitable for setting search criteria in the data popup.</p>

<Tips>
    <p>Inject the service by calling <code>DialogService</code> of <code>ShowSearchDialog</code> The method directly pops up the search criteria pop-up window, which greatly reduces the amount of code.<code>SearchDialogOption</code> Configuration class inheritance <code>DialogOption</code>, for more parameter settings, please click <a href="dialogs" target="_blank">[portal]</a></p>
</Tips>

<DemoBlock Title="Basic usage" Introduction="By binding the <code>TModel</code> data model, the search form for each field of the model is automatically generated" Name="Normal">
    <Button Text="Click to pop up search popup" OnClickWithoutRender="@ShowDialog" />
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Customize the criteria fields displayed in the search popup" Introduction="Explicitly set the displayed search field by setting the <code>Columns</code> parameter"  Name="Field">
    <Button Text="Click to pop up search popup" OnClickWithoutRender="@ShowColumnsDialog" />
</DemoBlock>

<DemoBlock Title="Set the layout in the search popup" Introduction="By setting the <code>RowType</code> parameter to explicitly set the layout of the components in the pop-up window, the default is the upper and lower layout, and the value can be set to <code>inline</code> horizontal layout" Name="Layout">
    <Button Text="Search popup (left-aligned)" OnClickWithoutRender="@ShowInlineDialog" />
    <Button Text="Search popup (right aligned)" OnClickWithoutRender="@ShowInlineAlignDialog" />
</DemoBlock>

<AttributeTable Items="@GetAttributes()" Title="SearchDialogOption property" />

// 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 SearchDialogs
{
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

    [NotNull]
    private BlockLogger? Trace { get; set; }

    private async Task ShowDialog()
    {
        var option = new SearchDialogOption<Foo>()
        {
            Title = "search popup",
            Model = new Foo(),
            ItemsPerRow = 2,
            RowType = RowType.Inline,
            OnCloseAsync = () =>
            {
                Trace.Log("Close button is clicked");
                return Task.CompletedTask;
            },
            OnResetSearchClick = () =>
            {
                Trace.Log("Reset button is clicked");
                return Task.CompletedTask;
            },
            OnSearchClick = () =>
            {
                Trace.Log("Search button is clicked");
                return Task.CompletedTask;
            }
        };

        await DialogService.ShowSearchDialog(option);
    }

    private async Task ShowColumnsDialog()
    {
        var model = new Foo();
        var option = new SearchDialogOption<Foo>()
        {
            Title = "Search popup",
            Model = model,
            ItemsPerRow = 2,
            RowType = RowType.Inline,
            Items = Utility.GenerateColumns<Foo>(p => p.GetFieldName() == nameof(Foo.Name) || p.GetFieldName() == nameof(Foo.Address))
        };
        await DialogService.ShowSearchDialog(option);
    }

    private async Task ShowInlineDialog()
    {
        var model = new Foo();
        var option = new SearchDialogOption<Foo>()
        {
            Title = "Search popup",
            ItemsPerRow = 2,
            RowType = RowType.Inline,
            Model = model,
            Items = Utility.GenerateColumns<Foo>(p => p.GetFieldName() == nameof(Foo.Name) || p.GetFieldName() == nameof(Foo.Address))
        };
        await DialogService.ShowSearchDialog(option);
    }

    private async Task ShowInlineAlignDialog()
    {
        var model = new Foo();
        var option = new SearchDialogOption<Foo>()
        {
            Title = "Search popup",
            ItemsPerRow = 2,
            RowType = RowType.Inline,
            LabelAlign = Alignment.Right,
            Model = model,
            Items = Utility.GenerateColumns<Foo>(p => p.GetFieldName() == nameof(Foo.Name) || p.GetFieldName() == nameof(Foo.Address))
        };
        await DialogService.ShowSearchDialog(option);
    }

    /// <summary>
    /// Get property method
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = "ShowLabel",
            Description = "Whether to show labels",
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "Model",
            Description = "Generic parameters are used for rendering UI",
            Type = "TModel",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "Items",
            Description = "Set of search criteria",
            Type = "IEnumerable<IEditorItem>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "DialogBodyTemplate",
            Description = "SearchDialog Body Template",
            Type = "RenderFragment<TModel>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "ResetButtonText",
            Description = "Reset button text",
            Type = "string",
            ValueList = " — ",
            DefaultValue = "reset"
        },
        new AttributeItem() {
            Name = "QueryButtonText",
            Description = "Query button text",
            Type = "string",
            ValueList = " — ",
            DefaultValue = "Inquire"
        },
        new AttributeItem() {
            Name = "OnResetSearchClick",
            Description = "Rreset callback delegate",
            Type = "Func<Task>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "OnSearchClick",
            Description = "Search callback delegate",
            Type = "Func<Task>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "ItemsPerRow",
            Description = "Displays the number of components per line",
            Type = "int?",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "RowType",
            Description = "Set the component layout",
            Type = "RowType",
            ValueList = "Row|Inline",
            DefaultValue = "Row"
        },
        new AttributeItem() {
            Name = "LabelAlign",
            Description = "Inline Label alignment in layout mode",
            Type = "Alignment",
            ValueList = "None|Left|Center|Right",
            DefaultValue = "None"
        }
    };
}