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

    <DataAnnotationsValidator />


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


        <DxMaskedInput @bind-Value="auctionBidModel.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=true/>
        </DxMaskedInput>
        


    </div>
    <ValidationMessage For="@(() => auctionBidModel.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 AuctionBidModel? auctionBidModel { get; set; }

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

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

    [Parameter]
    public EventCallback<AuctionBidModel> auctionBidModelChanged { get; set; }

    char Placeholder = '_';

    private string spinnerClass = "";

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

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

}