@using Insight.Web.Models.Account;

@inherits ComponentBase
@layout LoginLayout

@inject IJSRuntime JSRuntime

<PageTitle>@_title</PageTitle>

<style>
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    }
    .mud-input{
        background-color: white;
    }

    .blur-layer {
        position: absolute;
        backdrop-filter: blur(10px);
        opacity: 0.5;
    }

    .app-caption {
        font-weight: bold;
        pointer-events: none;
        user-select: none;
        -moz-user-select: none; /* Firefox */
        -webkit-user-select: none; /* Chrome and Safari */
        -ms-user-select: none; /* IE 10+ and Edge */
    }

    .app-caption {
        font-weight: bold;
        pointer-events: none;
        user-select: none;
        -moz-user-select: none; /* Firefox */
        -webkit-user-select: none; /* Chrome and Safari */
        -ms-user-select: none; /* IE 10+ and Edge */
    }

    
</style>

<div id="particles" style="width: 100%; height: calc(100vh - 6px); position: absolute;" />

<MudGrid Justify="Justify.Center" Spacing="0" Style="height: 100vh; align-items: center;">
    <MudItem xs="12" md="6" lg="5" xl="4" xxl="3" Style="height: 100%;">
        <div style="position: relative; height: 100%;">
            <div class="blur-layer" style="height: 100%; width: 100%; z-index: 2;"></div>
            <div style="display: flex; align-items: center; justify-content: center; height: 100%;">
                <div style="width: 80%; z-index: 3;">
                    <div class="d-md-none d-block">
                        <p class="app-caption" style="font-size: 30px; color: black;">
                            INSIGHT
                        </p>
                    </div>
                    @if (Key is null)
                    {
                        <EditForm Model="@_model" OnValidSubmit="()=>SubmitAsync(_model)">
                            <MudGrid>
                                <MudItem xs="12" md="12" lg="12">
                                    <MudTextField T="string" @bind-Value="_model.Email" For="()=>_model.Email" Placeholder="E-Mail" Variant="Variant.Outlined" />
                                </MudItem>
                                <MudItem xs="12" md="12" lg="12">
                                    <MudTextField @bind-Value="_model.Password" For="()=>_model.Password" InputType="@(_passwordVisible ? InputType.Text : InputType.Password)"
                                                  Placeholder="Password" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentIcon="@(_passwordVisible ? Icons.Material.Filled.VisibilityOff : Icons.Material.Filled.Visibility)"
                                                  OnAdornmentClick="()=>_passwordVisible = !_passwordVisible" />
                                </MudItem>
                                <MudItem xs="12" md="12" lg="12" Class="d-flex justify-space-between">
                                    <MudSpacer />
                                    <MudCheckBox T="bool" Label="Remember" @bind-Value="_model.RememberMe" Color="Color.Primary" Class="ml-n1" />
                                </MudItem>
                                <MudItem xs="12" md="12" lg="12" Class="d-flex justify-center">
                                    <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Outlined" DisableElevation Color="Color.Surface" Size="Size.Large" Style="width: 100%; background-color: white;">
                                         Login
                                     </MudButton>
                                 </MudItem>
                             </MudGrid>
                         </EditForm>
                    }
                    else
                    {
                        <MudGrid>
                            <MudItem xs="12" md="12" lg="12">
                                <MudTextField T="string" @bind-Value="_code" Placeholder="Authenticator Token" Variant="Variant.Outlined" />
                             </MudItem>
                             <MudItem xs="12" md="12" lg="12" Class="d-flex justify-center">
                                 <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Outlined" DisableElevation Color="Color.Surface" Size="Size.Large" Style="width: 100%; background-color: white;" OnClick="()=>SubmitTwoFactor(_code)">
                                     Authenticate
                                 </MudButton>
                             </MudItem>
                         </MudGrid>
                    }
                </div>
            </div>
        </div>
    </MudItem>
    <MudItem xs="12" md="6" lg="7" xl="8" xxl="9" Class="d-none d-md-block" Style="background-color: black; width:100%; height:100%;">
        <div style="display: flex; align-items: center; justify-content: center; height: 100%;">
            <div style="z-index: 3;">
                <p class="app-caption font-size-responsive" style="color: white;">
                    INSIGHT
                </p>
            </div>
        </div>
    </MudItem>
</MudGrid>

@code{
    private LoginModel _model = new();
    private string? _code;
    private bool _passwordVisible;

    private async Task InitializeParticlesAsync()
    {
        await JSRuntime.InvokeVoidAsync("LoadParticles", "particles");
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await InitializeParticlesAsync();
        }
    }
}