@using System.ComponentModel.DataAnnotations;
<MudDrawer @bind-Open="Visible" Anchor="Anchor.End" Elevation="0" Variant="@DrawerVariant.Temporary" ClipMode="DrawerClipMode.Always" Width="400px">
    <MudDrawerHeader>
        <MudText Typo="Typo.h6">
            2FA
        </MudText>
    </MudDrawerHeader>

    <MudStack Justify="Justify.Center" Class="px-6" Spacing="3">
        <div class="d-flex justify-center" style="height: @(!_showQrCode ? 0 : 272)px;">
            <span id="qrc" hidden="@(!_showQrCode)" style="border-style: solid; border-color: white; border-width: 1px;" />
            @*<div style="width:50px;" />
            <MudText Align="Align.Left" Typo="Typo.h6" hidden="@(!_showQrCode)" Style="text-decoration:overline;">
                @AuthenticatorFormatKey
            </MudText>*@
        </div>
        <div hidden="@(!_showQrCode)">
            @*<MudDivider />*@
            <MudText Align="Align.Center" Typo="Typo.subtitle2" Style="text-decoration:none;">
                @_authenticatorFormatKey
            </MudText>
            @*<MudDivider />*@
        </div>
        
        @if (_content == Content.Options)
        {
            @if (true)
            {
                _showQrCode = false;
            }

            @*@if (false) // test
            {
                <MudButton OnClick="()=>OnChangeAsync(Content.UseRecovery)" Variant="Variant.Outlined" DisableElevation Size="Size.Large" Color="Color.Info">
                    Recovery
                </MudButton>
            }*@

            @if (_enabled)
            {
                <MudButton OnClick="()=>OnChangeAsync(Content.Validate)" Variant="Variant.Outlined" DisableElevation Size="Size.Large" Color="Color.Info">
                    Add Device
                </MudButton>
            }

            @if (_enabled)
            {
                <MudButton OnClick="DisableAsync" Variant="Variant.Filled" DisableElevation Size="Size.Large" Color="Color.Warning">
                Disable
                </MudButton>
            }
            else
            {
                <MudButton OnClick="()=>OnChangeAsync(Content.Enable)" Variant="Variant.Filled" DisableElevation Size="Size.Large" Color="Color.Success">
                Enable
                </MudButton>
            }

            <MudDivider Class="mt-3 mb-3" />

            <MudButton OnClick="()=>OnChangeAsync(Content.ResetRecovery)" Variant="Variant.Outlined" DisableElevation Size="Size.Large" Color="Color.Error">
            Reset Recovery Codes
            </MudButton>

            <MudButton OnClick="()=>OnChangeAsync(Content.Delete)" Variant="Variant.Filled" DisableElevation Size="Size.Large" Color="Color.Error">
            Delete Authenticator
            </MudButton>
        }
        else if (_content == Content.Validate)
        {
            @if (true)
            {
                _showQrCode = true;
            }

            <EditForm Model="@_code" OnValidSubmit="()=>ValidateAsync(_code)" class="mt-3">
                <MudTextField T="string" Label="Authenticator Code" Variant="Variant.Outlined" Margin="Margin.Dense" @bind-Value="_code" Clearable AutoFocus />
                <MudStack Justify="Justify.Center" Row Class="mt-4">
                <MudButton OnClick="()=>OnChangeAsync(Content.Options)" Variant="Variant.Outlined" DisableElevation Size="Size.Large" Color="Color.Surface">
                    Cancel
                    </MudButton>
                    <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" DisableElevation Size="Size.Large" Color="Color.Info" Style="width:100%;">
                    Validate
                    </MudButton>
                    </MudStack>
                    </EditForm>
        }
        else if (_content == Content.Enable)
        {
            @if (true)
            {
                _showQrCode = true;
            }

            <MudTextField T="string" @bind-Value="@_code" Label="Authenticator Code" Variant="Variant.Outlined" Margin="Margin.Dense" Clearable AutoFocus />
            <MudStack Justify="Justify.Center" Row Class="mt-4">
                <MudButton OnClick="()=>OnChangeAsync(Content.Options)" Variant="Variant.Outlined" DisableElevation Size="Size.Large" Color="Color.Surface">
                    Cancel
                </MudButton>
                <MudButton OnClick="()=>EnableAsync(_code)" Variant="Variant.Filled" DisableElevation Size="Size.Large" Color="Color.Success" Style="width: 100%;">
                    Enable
                </MudButton>
            </MudStack>
        }
        else if (_content == Content.Delete)
        {
            @if (true)
            {
                _showQrCode = false;
            }

            <MudStack Justify="Justify.Center" Row>
            <MudButton OnClick="()=>OnChangeAsync(Content.Options)" Variant="Variant.Outlined" DisableElevation Size="Size.Large" Color="Color.Surface">
                Cancel
                </MudButton>
                <MudButton OnClick="DeleteAsync" Variant="Variant.Filled" DisableElevation Size="Size.Large" Color="Color.Error" FullWidth>
                Confirm Delete
            </MudButton>
            </MudStack>
        }
        else if (_content == Content.UseRecovery)
        {
            @if (true)
            {
                _showQrCode = false;
            }

            <EditForm Model="@_code" OnValidSubmit="()=>UseRecoveryAsync(_code)">
                <MudTextField T="string" Label="Recovery Code" Variant="Variant.Outlined" Margin="Margin.Dense" @bind-Value="_code" Clearable AutoFocus />
                <MudStack Justify="Justify.Center" Row Class="mt-4">
                <MudButton OnClick="()=>OnChangeAsync(Content.Options)" Variant="Variant.Outlined" DisableElevation Size="Size.Large" Color="Color.Surface">
                    Cancel
                    </MudButton>
                    <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" DisableElevation Size="Size.Large" Color="Color.Error" Style="width: 100%;">
                    Recover
                    </MudButton>
                    </MudStack>
                    </EditForm>
        }
        else if (_content == Content.ResetRecovery)
        {
            @if (true)
            {
                _showQrCode = false;
            }

            <MudStack Justify="Justify.Center" Row>
                <MudButton OnClick="()=>OnChangeAsync(Content.Options)" Variant="Variant.Outlined" DisableElevation Size="Size.Large" Color="Color.Surface">
                    Cancel
                </MudButton>
                <MudButton OnClick="ResetRecoveryAsync" Variant="Variant.Filled" DisableElevation Size="Size.Large" Color="Color.Error" FullWidth>
                    Confirm Reset
                </MudButton>
            </MudStack>
        }
        else if (_content == Content.ShowRecovery)
        {
            @if (true)
            {
                _showQrCode = false;
            }

            @if (_recoveryCodes != null)
            {
                @foreach (var rc in _recoveryCodes)
                {
                    <MudText Align="Align.Center" Typo="Typo.h4">
                        @rc
                    </MudText>

                    <MudDivider Class="mt-3 mb-3" />
                }
            }

            <MudButton OnClick="()=>OnChangeAsync(Content.Options)" Variant="Variant.Filled" DisableElevation Size="Size.Large" Color="Color.Warning">
                Acknowledged
            </MudButton>
        }
    </MudStack>
</MudDrawer>

@code
{
    private string? _code;

    private bool _visible;
    private bool _showQrCode;

    private bool _enabled;
    private int _recoveryCount;
    private List<string>? _recoveryCodes;
    private string? _authenticatorKey;
    private string? _authenticatorFormatKey;

    public bool Visible
    {
        get
        {
            return _visible;
        }
        set
        {
            if (_visible == value) return;
            if (value) _content = Content.Options;

            _visible = value;

            StateHasChanged();

            if (OnToggle is not null)
            {
                OnToggle();
            }
        }
    }

    public void Toggle()
    {
        Visible = !Visible;
    }
}