@using TIAMWebApp.Shared.Application.Models.PageModels;
<h3>Step 2: Phone Number</h3>
<EditForm Model="@regModel" OnValidSubmit="GoToNextStep">

    

    <DataAnnotationsValidator />


    <div class="form-field d-flex align-items-center">


        <DxMaskedInput @bind-Value="regModel.PhoneNumber"
        Id="PhoneNumber"
                       Mask="\+(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*(\d{1,2})"
                       MaskMode="@MaskMode.RegEx">
            <DxRegExMaskProperties Placeholder="Placeholder" 
                PlaceholdersVisible=false/>
        </DxMaskedInput>
        


    </div>
    <ValidationMessage For="@(() => regModel.PhoneNumber)" />

    <a class="btn btn-primary mt-3" @onclick="GoToPreviousStep">Previous</a>
    <button class="btn btn-primary mt-3" type="submit">
        <span class="@spinnerClass"></span>
        Next
    </button>
    
</EditForm>



@code {
    [Parameter]
    public RegistrationModel regModel { get; set; }

    [Parameter]
    public EventCallback<RegistrationModel> onNext { get; set; }

    [Parameter]
    public EventCallback<RegistrationModel> onPrev { get; set; }

    [Parameter]
    public EventCallback<RegistrationModel> RegModelChanged { get; set; }

    char Placeholder = '_';

    private string spinnerClass = "";

    private async Task GoToNextStep()
    {
        spinnerClass = "spinner-border spinner-border-sm";
        await Task.Delay(500);
        spinnerClass = "";
        await RegModelChanged.InvokeAsync(regModel);
        await onNext.InvokeAsync();
    }

    private async Task GoToPreviousStep()
    {
        
        await onPrev.InvokeAsync();
    }

}