@page "/validate-form"
@inject IStringLocalizer<ValidateForms> Localizer
@inject IStringLocalizer<Foo> LocalizerFoo

<h3>@Localizer["ValidateFormsTitle"]</h3>

<h4>@Localizer["ValidateFormsSubTitle"]</h4>

<DemoBlock Title="@Localizer["ValidateFormNormalTitle"]" Introduction="@Localizer["ValidateFormNormalIntro"]" Name="Normal">
    <section ignore>
        <p><b>@Localizer["ValidateFormNormalBasicUsageDescription"]</b></p>
        <ul class="ul-demo mb-3">
            <li>@((MarkupString)Localizer["ValidateFormNormalLi1"].Value)</li>
            <li>@((MarkupString)Localizer["ValidateFormNormalLi2"].Value)</li>
            <li>@((MarkupString)Localizer["ValidateFormNormalLi3"].Value)</li>
            <li>@((MarkupString)Localizer["ValidateFormNormalLi4"].Value)</li>
            <li>@((MarkupString)Localizer["ValidateFormNormalLi5"].Value)</li>
            <li>@((MarkupString)Localizer["ValidateFormNormalLi6"].Value)</li>
            <li>@((MarkupString)Localizer["ValidateFormNormalLi7"].Value)</li>
            <li>@((MarkupString)Localizer["ValidateFormNormalLi9"].Value)</li>
        </ul>
        <p><b>@Localizer["ValidateFormNormalBasicUsageDescription2"]</b></p>
        <ul class="ul-demo mb-3">
            <li>@((MarkupString)Localizer["ValidateFormNormalLi8"].Value)</li>
            <li>@((MarkupString)Localizer["ValidateFormNormalFormLabelWidth"].Value)</li>
        </ul>
        <p>@((MarkupString)Localizer["LongDisplayDescription"].Value)</p>
    </section>

    <ValidateForm Model="@Model1" OnFieldValueChanged="@OnFiledChanged"
                  OnValidSubmit="@OnValidSubmit1" OnInvalidSubmit="@OnInvalidSubmit1">
        <div class="row g-3">
            <div class="col-12">
                <BootstrapInputGroup>
                    <BootstrapInputGroupLabel ShowRequiredMark DisplayText="Test"></BootstrapInputGroupLabel>
                    <BootstrapInput @bind-Value="@Model1.Name" DisplayText="@Localizer["LongDisplayText"]" />
                </BootstrapInputGroup>
            </div>
        </div>
        <div class="row g-3 form-inline mt-0">
            <div class="col-12">
                <BootstrapInput @bind-Value="@Model1.Address" DisplayText="@Localizer["LongDisplayText"]" ShowLabelTooltip="true" />
            </div>
            <div class="col-12">
                <Button ButtonType="ButtonType.Submit" Icon="fa-fw fa-solid fa-floppy-disk" Text="@Localizer["ValidateFormsSubmitButtonText"]" IsAsync="true"></Button>
            </div>
        </div>
    </ValidateForm>
    <ConsoleLogger @ref="Logger1" />
</DemoBlock>

<DemoBlock Title="@Localizer["ValidateFormInnerComponentTitle"]" Introduction="@Localizer["ValidateFormInnerComponentIntro"]" Name="InnerComponent">
    <section ignore>
        <p class="legend">@Localizer["ValidateFormInnerComponentInnerComponentLabel"]</p>
        <p>@Localizer["ValidateFormInnerComponentInnerComponentDescription1"]</p>
        <ul class="ul-demo mb-3">
            <li>@Localizer["ValidateFormInnerComponentInnerComponentLi1"]</li>
            <li>@Localizer["ValidateFormInnerComponentInnerComponentLi2"]</li>
            <li>@Localizer["ValidateFormInnerComponentInnerComponentLi3"]</li>
            <li>@Localizer["ValidateFormInnerComponentInnerComponentLi4"]</li>
            <li>@Localizer["ValidateFormInnerComponentInnerComponentLi5"]</li>
        </ul>
        <p>@((MarkupString)Localizer["ValidateFormInnerComponentInnerComponentDescription2"].Value)</p>
    </section>

    <ValidateForm Model="@Model2" OnValidSubmit="@OnValidSubmit2" OnInvalidSubmit="@OnInvalidSubmit2">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInputGroupLabel @bind-Value="@Model2.Name" />
                <BootstrapInputGroup>
                    <BootstrapInputGroupLabel DisplayText="Test" />
                    <Display @bind-Value="@Model2.Name"></Display>
                </BootstrapInputGroup>
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInputNumber @bind-Value="@Model2.Count" />
            </div>
            <div class="col-12 col-sm-6">
                <DateTimePicker @bind-Value="@Model2.DateTime" />
            </div>
            <div class="col-12 col-sm-6">
                <Select @bind-Value="@Model2.Education" />
            </div>
            <div class="col-12">
                <CheckboxList @bind-Value="@Model2.Hobby" Items="@Hobbies2" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Icon="fa-fw fa-solid fa-floppy-disk" IsAsync="true" Text="@Localizer["ValidateFormsSubmitButtonText"]" />
            </div>
        </div>
    </ValidateForm>
    <ConsoleLogger @ref="Logger2" />
</DemoBlock>

<DemoBlock Title="@Localizer["ValidateFormCustomDisplayErrorTitle"]" Introduction="@Localizer["ValidateFormCustomDisplayErrorIntro"]" Name="CustomDisplayError">
    <section ignore>@((MarkupString)Localizer["ValidateFormCustomDisplayErrorDescription"].Value)</section>
    <ValidateForm @ref="FooForm" Model="@Model3" OnValidSubmit="@OnValidSetError">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model3.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInputNumber @bind-Value="@Model3.Count" />
            </div>
            <div class="col-12 col-sm-6">
                <DateTimePicker @bind-Value="@Model3.DateTime" />
            </div>
            <div class="col-12 col-sm-6">
                <Select @bind-Value="@Model3.Education" />
            </div>
            <div class="col-12">
                <CheckboxList @bind-Value="@Model3.Hobby" Items="@Hobbies3" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="@Localizer["ValidateFormsSubmitButtonText"]" />
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["ValidateFormValidatorAllFieldTitle"]" Introduction="@Localizer["ValidateFormValidatorAllFieldIntro"]" Name="ValidatorAllField">
    <section ignore>@((MarkupString)Localizer["ValidateFormValidatorAllFieldDescription"].Value)</section>
    <ValidateForm Model="@Model4" OnInvalidSubmit="@OnInvalidSubmitAddress"
                  ValidateAllProperties="true">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model4.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInputNumber @bind-Value="@Model4.Count" />
            </div>
            <div class="col-12 col-sm-6">
                <DateTimePicker @bind-Value="@Model4.DateTime" />
            </div>
            <div class="col-12 col-sm-6">
                <Select @bind-Value="@Model4.Education" />
            </div>
            <div class="col-12">
                <CheckboxList @bind-Value="@Model4.Hobby" Items="@Hobbies4" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="@Localizer["ValidateFormsSubmitButtonText"]" />
            </div>
        </div>
    </ValidateForm>
    <ConsoleLogger @ref="Logger4" />
</DemoBlock>

<DemoBlock Title="@Localizer["ValidateFormComplexValidationTitle"]" Introduction="@Localizer["ValidateFormComplexValidationIntro"]" Name="ComplexValidation">
    <section ignore>
        <p>@((MarkupString)Localizer["ValidateFormComplexValidationDescription"].Value)</p>
        <Pre class="mb-3">@Localizer["ValidateFormComplexValidationPre"]</Pre>
    </section>

    <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="@Localizer["ValidateFormsSubmitButtonText"]" />
            </div>
        </div>
    </ValidateForm>
    <ConsoleLogger @ref="Logger5" />

    <section ignore>
        @foreach (var key in GetValueChangedFieldCollection())
        {
            <div>
                <span>@key.Key.Model.GetType().Name</span>.<span>@key.Key.FieldName</span>: <span>@key.Value</span>
            </div>
        }
    </section>
</DemoBlock>

<DemoBlock Title="@Localizer["ValidateFormDynamicFormTitle"]" Introduction="@Localizer["ValidateFormDynamicFormIntro"]" Name="DynamicForm">
    <section ignore>@((MarkupString)Localizer["ValidateFormDynamicFormDescription"].Value)</section>
    <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="@Localizer["ValidateFormsSubmitButtonText"]" />
                <Button Text="@Localizer["ChangeButtonText"]" OnClick="OnValidateChange" class="ms-3" />
                <Button Text="@Localizer["ResetButtonText"]" OnClick="OnValidateReset" class="ms-3" />
            </div>
        </div>
    </ValidateForm>
    <ConsoleLogger @ref="Logger6" />
</DemoBlock>

<DemoBlock Title="@Localizer["ValidateFormInnerFormLabelTitle"]" Introduction="@Localizer["ValidateFormInnerFormLabelIntro"]" Name="InnerFormLabel">
    <section ignore>
        <p>@((MarkupString)Localizer["ValidateFormInnerFormLabelDescription"].Value)</p>
        <Pre class="mb-3">&lt;EditorItem @@bind-Field="@@context.Address" ValidateRules="@@CustomerRules" /&gt;</Pre>
    </section>
    <ValidateForm Model="@Model7">
        <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="@Hobbies7" />
            </FieldItems>
        </EditorForm>
        <div class="form-footer">
            <Button ButtonType="@ButtonType.Submit" Text="@Localizer["ValidateFormsSubmitButtonText"]" />
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["ValidateFormCustomValidationFormTitle"]" Introduction="@Localizer["ValidateFormCustomValidationFormIntro"]" Name="CustomValidationForm">
    <section ignore>
        <p>@((MarkupString)Localizer["CustomValidationFormP1"].Value)</p>
        <Pre class="mb-3">protected override void OnInitialized()
{
    base.OnInitialized();
    // @Localizer["CustomValidationFormComment1"]
    CustomerRules.Add(new FormItemValidator(new EmailAddressAttribute()));

    // @Localizer["CustomValidationFormComment2"]
    // &lt;BootstrapInput @@bind-Value="@@Model.Address" ValidateRules="@@CustomerRules" /&gt;
}</Pre>
    </section>

    <ValidateForm Model="@Model8">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model8.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model8.Address" ValidateRules="@CustomerRules" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="@Localizer["ValidateFormsSubmitButtonText"]" />
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["ValidateFormValidateTitle"]" Introduction="@Localizer["ValidateFormValidateIntro"]" Name="Validate">
    <section ignore>
        <p>@((MarkupString)Localizer["ValidateFormValidateDescription"].Value)</p>
        <Pre class="mb-3">[NotNull]
private ValidateForm? ValidatorForm { get; set; }

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

    <ValidateForm Model="@Model9" @ref="ValidatorForm">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model9.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model9.Address" />
            </div>
        </div>
    </ValidateForm>
    <Button Icon="fa-solid fa-floppy-disk" Text="@Localizer["ValidateButtonText"]" OnClickWithoutRender="OnValidator" class="my-3"></Button>
</DemoBlock>

<DemoBlock Title="@Localizer["ValidateFormDisableAutoSubmitFormByEnterTitle"]" Introduction="@Localizer["ValidateFormDisableAutoSubmitFormByEnterIntro"]" Name="DisableAutoSubmitFormByEnter">
    <section ignore>@((MarkupString)Localizer["DisableAutoSubmitFormByEnterDesc"].Value)</section>
    <ValidateForm Model="@Model10" DisableAutoSubmitFormByEnter="true">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model10.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model10.Address" ValidateRules="@CustomerRules" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="@Localizer["ValidateFormsSubmitButtonText"]" />
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["ValidateFormIValidatableObjectTitle"]" Introduction="@Localizer["ValidateFormIValidatableObjectIntro"]" Name="IValidatableObject">
    <section ignore>
        <p>@((MarkupString)Localizer["ValidateFormIValidatableObjectDescription"].Value)</p>
        <Pre class="mb-3">public class CustomValidataModel : IValidatableObject
{
    public string? Name { get; set; }

    public string? Telephone1 { get; set; }

    public string? Telephone2 { get; set; }

    public IEnumerable&lt;ValidationResult&gt; Validate(ValidationContext validationContext)
    {
        if (string.Equals(Telephone1, Telephone2, StringComparison.InvariantCultureIgnoreCase))
        {
            var localizer = validationContext.GetRequiredService&lt;IStringLocalizer&lt;CustomValidataModel&gt;&gt;();
            yield return new ValidationResult(localizer["CanNotBeTheSame"], [nameof(Telephone1), nameof(Telephone2)]);
        }
        if (string.IsNullOrEmpty(Name))
        {
            yield return new ValidationResult("Name is required", [nameof(Name)]);
        }
    }
}</Pre>
    </section>
    <ValidateForm Model="@ValidataModel" OnInvalidSubmit="OnInvalidValidatableObject">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@ValidataModel.Telephone1" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@ValidataModel.Telephone2" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="@Localizer["ValidateFormsSubmitButtonText"]" />
            </div>
        </div>
    </ValidateForm>
    <ConsoleLogger @ref="Logger8" />
</DemoBlock>

<DemoBlock Title="@Localizer["ValidateFormIValidateCollectionTitle"]" Introduction="@Localizer["ValidateFormIValidateCollectionIntro"]" Name="IValidateCollectionObject">
    <section ignore>
        <p>@((MarkupString)Localizer["ValidateFormIValidateCollectionDescription"].Value)</p>
        <Pre class="mb-3">public class CustomValidateCollectionModel : IValidateCollection
{
    public string? Telephone1 { get; set; }

    public string? Telephone2 { get; set; }

    private readonly List&lt;string> _validMemberNames = [];

    private readonly List&lt;ValidationResult&gt; _invalidMemberNames = [];

    public IEnumerable&lt;ValidationResult&gt; Validate(ValidationContext validationContext)
    {
        _validMemberNames.Clear();
        _invalidMemberNames.Clear();
        if (string.Equals(Telephone1, Telephone2, StringComparison.InvariantCultureIgnoreCase))
        {
            var localizer = validationContext.GetRequiredService&lt;IStringLocalizer&lt;CustomValidataModel&gt;&gt;();
            var errorMessage = localizer["CanNotBeTheSame"];
            if (validationContext.MemberName == nameof(Telephone1))
            {
                _invalidMemberNames.Add(new ValidationResult(errorMessage, [nameof(Telephone2)]));
            }
            else if (validationContext.MemberName == nameof(Telephone2))
            {
                _invalidMemberNames.Add(new ValidationResult(errorMessage, [nameof(Telephone1)]));
            }
            yield return new ValidationResult(errorMessage, [validationContext.MemberName!]);
        }
        else if (validationContext.MemberName == nameof(Telephone1))
        {
            _validMemberNames.Add(nameof(Telephone2));

        }
        else if (validationContext.MemberName == nameof(Telephone2))
        {
            _validMemberNames.Add(nameof(Telephone1));
        }
    }

    public List&lt;string&gt; ValidMemberNames() =&gt; _validMemberNames;

    public List&lt;ValidationResult&gt; InvalidMemberNames() =&gt; _invalidMemberNames;
}</Pre>
        <p>@((MarkupString)Localizer["ValidateFormIValidatableObjectDescription"].Value)</p>
    </section>
    <ValidateForm Model="@ValidateCollectionModel" OnInvalidSubmit="OnInvalidValidateCollection">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@ValidateCollectionModel.Telephone1" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@ValidateCollectionModel.Telephone2" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="@Localizer["ValidateFormsSubmitButtonText"]" />
            </div>
        </div>
    </ValidateForm>
    <ConsoleLogger @ref="Logger7" />
</DemoBlock>

<DemoBlock Title="@Localizer["ValidateMetadataTypeTitle"]" Introduction="@Localizer["ValidateMetadataTypeIntro"]" Name="MetadataType">
    <ValidateForm Model="@_mockModel">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@_mockModel.Email" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@_mockModel.ConfirmEmail" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="@Localizer["ValidateFormsSubmitButtonText"]" />
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

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

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