@using HushianWebApp.Service
@inject AuthService AuthService
<div class="text-end mb-3">
    <span class="badge bg-info p-2">نیاز برای ارتباط با کارشناسان وارد شود</span>
</div>
<div class=" group w-full">
    <Spinner Class="me-3" Type="SpinnerType.Dots" Color="SpinnerColor.Primary" Visible="@visible" />

    @if (ID==0)
    {
        <label for="user-name" class="block mb-2 text-slate-600 font-bold">
            شماره همراه / نام کاربری
        </label>
        <div class="d-flex">

            <div class="container-input" style="width:150px;margin-left:5px">
                <input disabled="@visible" style="text-align:center;height:30px" type="number" id="user-name" maxlength="64"
                @bind-value=Username title="نام کاربری را وارد کنید." class="input-form input_vk_1" required="" data-val="true" data-val-required="شماره همراه  / نام کاربری را وارد کنید." name="Username">

            </div>
            <Button disabled="visible" Color="ButtonColor.Primary" Type="ButtonType.Submit" @onclick="Login" class="btn-primary"
            style="text-align:center;height:30px">
                ورود
            </Button>
        </div>
    }
    else{
        <label for="user-name" class="block mb-2 text-slate-600 font-bold">
            جهت احراز کد ارسال شده را وارد کنید
        </label>

        <div class="d-flex">

            <div  style="width:200px;margin-left:5px;direction: ltr;">
                <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
                       @bind="code1" @oninput="MoveNext"
                       style="width: 40px; height: 40px; text-align: center; border: 2px solid #ccc; border-radius: 5px; font-size: 20px;"
                       @ref="input1" autoFocus />

                <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
                       @bind="code2" @oninput="MoveNext"
                       style="width: 40px; height: 40px; text-align: center; border: 2px solid #ccc; border-radius: 5px; font-size: 20px;"
                       @ref="input2" />

                <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
                       @bind="code3" @oninput="MoveNext"
                       style="width: 40px; height: 40px; text-align: center; border: 2px solid #ccc; border-radius: 5px; font-size: 20px;"
                       @ref="input3" />

                <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
                       @bind="code4" @oninput="OnLastInput"
                       style="width: 40px; height: 40px; text-align: center; border: 2px solid #ccc; border-radius: 5px; font-size: 20px;"
                       @ref="input4" />

            </div>
   
        </div>
    }

</div>


@code {
    private bool visible = false;
    [Parameter] public EventCallback OnMultipleOfThree { get; set; }
    public string Username { get; set; }
    public int ID { get; set; } = 0;
    public string Code { get; set; } = string.Empty;   
    //-----------------
    private string code1, code2, code3, code4;
    private ElementReference input1, input2, input3, input4;
}
@functions{
    async Task Login()
    {
        visible = true;
        ID= await  AuthService.login(new Common.Models.Auth.UserSide.AuthRequestFromUserSide()
        {
            Mobile=Username
        });
    
        visible = false;
    }
    async Task ver()
    {
        visible = true;
       if(await AuthService.Verificationlogin(ID, Code))
           await OnMultipleOfThree.InvokeAsync();
        visible = false;
    }
    private async Task MoveNext(ChangeEventArgs e)
    {
        if (e.Value?.ToString()?.Length == 1)
        {
            if (input1.Context == null) return;

            if (string.IsNullOrEmpty(code1))
                await input2.FocusAsync();
            else if (string.IsNullOrEmpty(code2))
                await input3.FocusAsync();
            else if (string.IsNullOrEmpty(code3))
                await input4.FocusAsync();
            else if (string.IsNullOrEmpty(code4))
            {
                Code = $"{code1}{code2}{code3}{code4}";
            }
        }
    }
    private async Task OnLastInput(ChangeEventArgs e)
    {
        code4 = e.Value?.ToString();

        if (!string.IsNullOrEmpty(code4) && code4.Length == 1)
        {
            Code = $"{code1}{code2}{code3}{code4}";
          
            await ver();
        }
    }
}