@page "/validateforms"
@inject IStringLocalizer<ValidateForms> Localizer

<h3>ValidateForm</h3>

<h4>Form components that can be used for data compliance checks</h4>

<DemoBlock Title="Basic usage" Introduction="Data compliance checks are automatically performed when components placed in the <code>ValidateForm</code> are submitted" Name="Normal">
    <p><b>Introduction</b></p>
    <ul class="ul-demo mb-3">
        <li><code>ValidateForm</code> component supports asynchronous setting of <code>Model</code> values</li>
        <li>The form event is for <code>OnValidSubmit</code> <code>OnInvalidSubmit</code></li>
        <li><code>Model</code> parameter is required is not allowed to be empty</li>
        <li>Multiple buttons can be placed within the form to set whether the <code>ButtonType='ButtonType.Submit'</code> parameter is submitted to the form</li>
        <li>The client authentication mechanism supports the model's <code>Required</code> label, setting the default English prompt information when not set by setting the <code>ErrorMessage</code> parameter prompt</li>
        <li>The form checks by default whether the binding field values within the form are legitimate, and you can set the <code>ValidateAllProperties</code> property value to <code>true</code> if you need to check all fields in the model</li>
        <li>Set the asynchronous submission form by setting the value of the Button <code>Button</code> property <code>IsAsync</code></li>
        <li>After the value of the component control in the form is modified, the <code>OnFieldChanged</code> method is called</li>
    </ul>
    <p><b>Note:</b></p>
    <ul class="ul-demo mb-3">
        <li>Components within a form are typically used to bind the property values of <code>Model</code> in both directions using bidirectional binding techniques, causing the component to refresh and re-render when its value changes <code>StateHasChanged</code>, and the method is called, i.e. its component or page is refreshed and re-rendered</li>
        <li>The default width of component front label is <code>120px</code>. If you need more, please change the style variable <code>--bb-row-label-width</code> in the project style file or remove <code>RowType.Inline</code></li>
    </ul>
    <p>In this example, set the <code>ShowLabelTooltip</code> in the <code>form-inline</code> style to <code>true</code> to make the mouse hover over the cropped label to display the complete information</p>
    <ValidateForm Model="@Model" OnFieldValueChanged="@OnFiledChanged"
                  OnValidSubmit="@OnValidSubmit1" OnInvalidSubmit="@OnInvalidSubmit1">
        <div class="row g-3">
            <div class="col-12">
                <BootstrapInput @bind-Value="@Model.Name" DisplayText="I am very long display text" />
            </div>
        </div>
        <div class="row g-3 form-inline mt-0">
            <div class="col-12">
                <BootstrapInput @bind-Value="@Model.Address" DisplayText="I am very long display text" ShowLabelTooltip="true" />
            </div>
            <div class="col-12">
                <Button ButtonType="ButtonType.Submit" Icon="fa-fw fa-solid fa-floppy-disk" Text="Submit" IsAsync="true" />
            </div>
        </div>
    </ValidateForm>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Built-in components" Introduction="Place the support form components into the <code>ValidateForm</code>" Name="InnerComponent">
    <p class="legend">Examples of components that support form validation</p>
    <p>Example illustration</p>
    <ul class="ul-demo mb-3">
        <li>The name is the string type</li>
        <li>The age is an integer type</li>
        <li>Birthday is the datetime type</li>
        <li>Education is an enumeration type</li>
        <li>Hobbies are collection types</li>
    </ul>
    <p>In this example, by setting the <b>submit button</b> property <code>IsAsync</code> to submit the form asynchronously, click Submit to disable itself, and resume after the asynchronous operation is complete</p>
    <ValidateForm Model="@Model" OnValidSubmit="@OnValidSubmit"
                  OnInvalidSubmit="@OnInvalidSubmit">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInputGroupLabel @bind-Value="@Model.Name" />
                <BootstrapInputGroup>
                    <Display @bind-Value="@Model.Name"></Display>
                    <BootstrapInputGroupLabel DisplayText="Test" />
                </BootstrapInputGroup>
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInputNumber @bind-Value="@Model.Count" />
            </div>
            <div class="col-12 col-sm-6">
                <DateTimePicker @bind-Value="@Model.DateTime" />
            </div>
            <div class="col-12 col-sm-6">
                <Select @bind-Value="@Model.Education" />
            </div>
            <div class="col-12">
                <CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Icon="fa-fw fa-solid fa-floppy-disk" IsAsync="true" Text="Submit" />
            </div>
        </div>
    </ValidateForm>
    <BlockLogger @ref="Trace2" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Custom displays error messages" Introduction="Set the custom error message by calling <code>SetError</code> method" Name="CustomDisplsyError">
    <p><b>Scenario</b><p>the client verification after the pass of the database save operation, if other problems, you can still make a form custom error prompt, in this case, after the data verification is legal, click the <code>submit form</code> button, the name field will show, <code>the database already exists</code> such a custom prompt</p></p>
    <ValidateForm @ref="FooForm" Model="@Model" OnValidSubmit="@OnValidSetError">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInputNumber @bind-Value="@Model.Count" />
            </div>
            <div class="col-12 col-sm-6">
                <DateTimePicker @bind-Value="@Model.DateTime" />
            </div>
            <div class="col-12 col-sm-6">
                <Select @bind-Value="@Model.Education" />
            </div>
            <div class="col-12">
                <CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="Submit" />
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="Validate all field values" Introduction="This component checks the model binding field values within the form by default, setting the <code>ValidateAllProperties</code> values if you need to check all field values for the model" Name="ValidatorAllField">
    <p>The <code>Address</code> is not placed in this example, because the <code>ValidateAllProperties</code> parameter value is <code>true</code>, the <code>Addres</code> field is still checked, and <code>OnInvalidSubmit</code> is triggered when the data is submitted after all the data in the timely form is legitimate callback delegate</p>
    <ValidateForm Model="@Model" OnInvalidSubmit="@OnInvalidSubmitAddress"
                  ValidateAllProperties="true">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInputNumber @bind-Value="@Model.Count" />
            </div>
            <div class="col-12 col-sm-6">
                <DateTimePicker @bind-Value="@Model.DateTime" />
            </div>
            <div class="col-12 col-sm-6">
                <Select @bind-Value="@Model.Education" />
            </div>
            <div class="col-12">
                <CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="Submit" />
            </div>
        </div>
    </ValidateForm>
    <BlockLogger @ref="Trace3" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Complex type support" Introduction="Supports any complex type of binding and validation" Name="ComplexValidation">
    <p>The second binding in this example is a super-complex type <code>ComplexModel.Dummy.Dummy2.Name</code> Empty the value, click <b>submit the form</b>validate the data. After the second text box verifies compliance, the error prompt is displayed again by calling the <code>SetError</code></p>
    <Pre>ComplexForm.SetError('Dummy.Dummy2.Name','数据库中已存在');</Pre>
    <ValidateForm @ref="ComplexForm" Model="@ComplexModel" OnInvalidSubmit="@OnInvalidComplexModel"
                  OnValidSubmit="@OnValidComplexModel">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@ComplexModel.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@ComplexModel.Dummy.Dummy2.Name" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="Submit" />
            </div>
        </div>
    </ValidateForm>
    <BlockLogger @ref="Trace4" class="mt-3" />
    <p class=mt-3>
        @foreach (var key in GetValueChagnedFieldCollection())
        {
            <div>
                <span>@key.Key.Model.GetType().Name</span>.<span>@key.Key.FieldName</span>: <span>@key.Value</span>
            </div>
        }
    </p>
</DemoBlock>

<DemoBlock Title="Dynamically adjust the components within the form" Introduction="By changing the components within the form, verify that the form can still be validated correctly" Name="DynamicForm">
    <p>Click the <b>Change component</b>button <code>address</code> The component changes to <code>count</code> components, <b>reset component</b>button recovery, <code>name</code> <code>address</code> component is required, <code>count</code> The component has a default value of <code>0</code> So you can check through the data</p>
    <ValidateForm Model="@DynamicModel" OnInvalidSubmit="@OnInvalidDynamicModel"
                  OnValidSubmit="@OnValidDynamicModel">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@DynamicModel.Name" />
            </div>
            <div class="col-12 col-sm-6">
                @if (ShowAddress)
                {
                    <BootstrapInput @bind-Value="@DynamicModel.Address" />
                }
                else
                {
                    <BootstrapInput @bind-Value="@DynamicModel.Count" />
                }
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="Submit" />
                <Button Text="Change" OnClick="OnValidateChange" class="ms-3" />
                <Button Text="Reset" OnClick="OnValidateReset" class="ms-3" />
            </div>
        </div>
    </ValidateForm>
    <BlockLogger @ref="Trace5" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Set the component label right alignment within the form" Introduction="Set the alignment of labels throughout the station or in a specific form with style uniformity" Name="InnerFormLabel">
    <p>Address text box adds <b>email address</b>validation rules</p>
    <Pre><EditorItem @bind-Field="@context.Address" ValidateRules="@CustomerRules" /></Pre>
    <ValidateForm Model="@Model">
        <EditorForm TModel="Foo" ItemsPerRow="2" RowType="RowType.Inline" LabelAlign="Alignment.Right">
            <FieldItems>
                <EditorItem @bind-Field="@context.Address" ValidateRules="@CustomerRules" />
                <EditorItem @bind-Field="@context.Hobby" Items="@Hobbys" />
            </FieldItems>
        </EditorForm>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="Customize the verification form" Introduction="Add custom validation rules by setting <code>Rules</code>" Name="CustomValidationForm">
    <p>Address text box adds <b>email address</b>verification rules, click On Submission to verify</p>
    <Pre>protected override void OnInitialized()
{
    base.OnInitialized();
    // Add mailbox validation rules
    CustomerRules.Add(new CustomerValidator(new EmailAddressAttribute()));

    // Used in Razor files
    // <BootstrapInput @bind-Value="@Model.Address" ValidateRules="@CustomerRules" />
}</Pre>
    <ValidateForm Model="@Model">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model.Address" ValidateRules="@CustomerRules" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="Submit" />
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="Manual Validate" Introduction="call the <code>ValidateForm</code> instance method <code>Validate</code> for trigger the form validation" Name="Validate">
    <p>The button is not submit button. so not trigger the form <code>submit</code> action, in this sample code use <code>OnClickWithoutRender</code> parameter for improve performance.</p>
    <ValidateForm Model="@Model" @ref="ValidatorForm">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model.Address" />
            </div>
        </div>
    </ValidateForm>
    <Button Icon="fa-solid fa-floppy-disk" Text="Save" OnClickWithoutRender="OnValidator" class="my-3"></Button>
    <Pre>[NotNull]
private ValidateForm? ValidatorForm { get; set; }

private Task OnClickValidate()
{
    ValidatorForm.Validate();
    return Task.CompletedTask;
}</Pre>
</DemoBlock>

<DemoBlock Title="Disable automatic submit form" Introduction="When the focus is in the input box in the form, pressing <kbd>Enter</kbd> will automatically submit the form by default. You can disable automatic submission by setting <code>DisableAutoSubmitFormByEnter="false"</code>" Name="DisableAutoSubmitFormByEnter">
    <p><code>form</code> form is an important element of<code>web</code>. If there is an <code>input</code> element in the form, when this element gets the focus, pressing <kbd>Enter</kbd> will automatically submit the form. This is a feature of the form element, not our component code logic. If this function is not needed, disable it by setting <code>DisableAutoSubmitFormByEnter="true"</code>, In this example, pressing Enter in the text box will not automatically <b>submit</b> and perform data compliance check. You need to click the <b>Submit</b> button to submit the form</p>
    <ValidateForm Model="@Model" DisableAutoSubmitFormByEnter="true">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model.Address" ValidateRules="@CustomerRules" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="Submit" />
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<MethodTable Items="@GetMethods()" />

// 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 Microsoft.AspNetCore.Components.Forms;
using System.Collections.Concurrent;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
///
/// </summary>
public partial class ValidateForms
{
    [NotNull]
    private BlockLogger? Trace { get; set; }

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

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

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

    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }

    [NotNull]
    private Foo? Model { get; set; }

    [NotNull]
    private IEnumerable<SelectedItem>? Hobbys { get; set; }

    [NotNull]
    private ValidateForm? FooForm { get; set; }

    [NotNull]
    private ValidateForm? ComplexForm { get; set; }

    [NotNull]
    private ComplexFoo? ComplexModel { get; set; }

    private List<IValidator> CustomerRules { get; } = new();

    /// <summary>
    /// 
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        CustomerRules.Add(new FormItemValidator(new EmailAddressAttribute()));
    }

    /// <summary>
    /// OnInitializedAsync 方法
    /// </summary>
    /// <returns></returns>
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        // 切换线程 模拟异步通过 webapi 加载数据
        await Task.Yield();

        Model = new() { Name = "Name", Education = EnumEducation.Primary, DateTime = DateTime.Now };

        // 初始化参数
        Hobbys = Foo.GenerateHobbys(LocalizerFoo);
        ComplexModel = new ComplexFoo()
        {
            Dummy = new Dummy1() { Dummy2 = new Dummy2() },
        };
    }

    [NotNull]
    private ValidateForm? ValidatorForm { get; set; }

    private Task OnValidator()
    {
        ValidatorForm.Validate();
        return Task.CompletedTask;
    }

    private async Task OnInvalidSubmit1(EditContext context)
    {
        await Task.Delay(1000);
        Trace.Log(Localizer["OnInvalidSubmitLog"]);
    }

    private async Task OnValidSubmit1(EditContext context)
    {
        await Task.Delay(1000);
        Trace.Log(Localizer["OnValidSubmitLog"]);
    }

    private void OnFiledChanged(string field, object? value)
    {
        Trace.Log($"{field}:{value}");
    }

    private async Task OnValidSubmit(EditContext context)
    {
        Trace2.Log(Localizer["OnValidSubmitSatringLog"]);
        await Task.Delay(3000);
        Trace2.Log(Localizer["OnValidSubmitDoneLog"]);
    }

    private Task OnInvalidSubmit(EditContext context)
    {
        Trace2.Log(Localizer["OnInvalidSubmitCallBackLog"]);
        return Task.CompletedTask;
    }

    private Task OnInvalidSubmitAddress(EditContext context)
    {
        Trace3.Log(Localizer["OnInvalidSubmitCallBackLog"]);
        return Task.CompletedTask;
    }

    private Task OnInvalidComplexModel(EditContext context)
    {
        Trace4.Log(Localizer["OnInvalidSubmitCallBackLog"]);
        return Task.CompletedTask;
    }

    private Task OnValidComplexModel(EditContext context)
    {
        Trace4.Log(Localizer["OnValidSubmitCallBackLog"]);
        ComplexForm.SetError("Dummy.Dummy2.Name", Localizer["DatabaseExistLog"]);
        return Task.CompletedTask;
    }

    private Task OnValidSetError(EditContext context)
    {
        FooForm.SetError<Foo>(f => f.Name, Localizer["DatabaseExistLog"]);
        return Task.CompletedTask;
    }

    private ConcurrentDictionary<FieldIdentifier, object?> GetValueChagnedFieldCollection() => ComplexForm?.ValueChagnedFields ?? new ConcurrentDictionary<FieldIdentifier, object?>();

    #region 动态更改表单内验证组件
    [NotNull]
    private BlockLogger? Trace5 { get; set; }

    private bool ShowAddress { get; set; }

    private Foo DynamicModel { get; set; } = new Foo();

    private Task OnInvalidDynamicModel(EditContext context)
    {
        Trace5.Log(Localizer["OnInvalidSubmitCallBackLog"]);
        return Task.CompletedTask;
    }

    private Task OnValidDynamicModel(EditContext context)
    {
        Trace5.Log(Localizer["OnValidSubmitCallBackLog"]);
        return Task.CompletedTask;
    }

    private void OnValidateChange()
    {
        ShowAddress = true;
    }

    private void OnValidateReset()
    {
        ShowAddress = false;
    }
    #endregion

    private class ComplexFoo : Foo
    {
        [NotNull]
        public Dummy1? Dummy { get; set; }
    }

    private class Dummy1
    {
        [NotNull]
        public Dummy2? Dummy2 { get; set; }
    }

    private class Dummy2
    {
        [Required]
        public string? Name { get; set; }
    }

    #region 参数说明
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        // TODO: 移动到数据库中
        new AttributeItem() {
            Name = "Model",
            Description = Localizer["Model"],
            Type = "object",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "ValidateAllProperties",
            Description = Localizer["ValidateAllProperties"],
            Type = "bool",
            ValueList = "true/false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = nameof(ValidateForm.DisableAutoSubmitFormByEnter),
            Description = Localizer[nameof(ValidateForm.DisableAutoSubmitFormByEnter)],
            Type = "bool",
            ValueList = "true/false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "ShowRequiredMark",
            Description = Localizer["ShowRequiredMark"],
            Type = "bool",
            ValueList = "true/false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "ShowLabelTooltip",
            Description = Localizer["ShowLabelTooltip"],
            Type = "bool?",
            ValueList = "true/false/null",
            DefaultValue = "null"
        },
        new AttributeItem() {
            Name = "ChildContent",
            Description = Localizer["ChildContent"],
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "OnValidSubmit",
            Description = Localizer["OnValidSubmit"],
            Type = "EventCallback<EditContext>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "OnInvalidSubmit",
            Description = Localizer["OnInvalidSubmit"],
            Type = "EventCallback<EditContext>",
            ValueList = " — ",
            DefaultValue = " — "
        }
    };

    /// <summary>
    /// 获得事件方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<MethodItem> GetMethods() => new MethodItem[]
    {
        new MethodItem()
        {
            Name = "SetError",
            Description = Localizer["SetError"],
            Parameters = "PropertyName, ErrorMessage",
            ReturnValue = " — "
        },
        new MethodItem()
        {
            Name = "Validate",
            Description = Localizer["Validate"],
            Parameters = " — ",
            ReturnValue = "boolean"
        }
    };
    #endregion
}