@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>Component description:</p>
    <ul class="ul-demo">
        <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>
    </ul>
    <p>Note:</p>
    <ul class="ul-demo">
        <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>
    </ul>
    <div class="form-demo">
        <ValidateForm Model="@Model" OnInvalidSubmit="@OnInvalidSubmit1"
                      OnValidSubmit="@OnValidSubmit1">
            <div class="row g-3">
                <div class="col-12">
                    <BootstrapInput @bind-Value="@Model.Name" />
                </div>
                <div class="col-12">
                    <Button ButtonType="ButtonType.Submit" Icon="fa fa-fw fa-save" Text="Submit" IsAsync="true" />
                </div>
            </div>
        </ValidateForm>
        <BlockLogger @ref="Trace" class="mt-3" />
    </div>
</DemoBlock>

<DemoBlock Title="Built-in components" Introduction="Place the support form components into the <code>ValidateForm </code>" Name="InnerComponent">
    <div class="form-demo">
        <label class="legend">Examples of components that support form validation</label>
        <p>Example illustration</p>
        <ul>
            <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">
                    <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" Icon="fa fa-fw fa-save" IsAsync="true" Text="Submit" />
                </div>
            </div>
        </ValidateForm>
        <BlockLogger @ref="Trace2" class="mt-3" />
    </div>
</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>, <div> 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 </div></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>

<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 BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.Extensions.Localization;
using System;
using System.Collections.Concurrent;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

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() },
        };
    }

    private Task OnInvalidSubmit1(EditContext context)
    {
        Trace.Log(Localizer["OnInvalidSubmitLog"]);
        return Task.CompletedTask;
    }

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

    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 = "ShowRequiredMark",
                Description = Localizer["ShowRequiredMark"],
                Type = "bool",
                ValueList = "true/false",
                DefaultValue = "true"
            },
            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 = " — "
            }
    };
    #endregion
}