@using MongoDB.Bson;

<MudDrawer @bind-Open="_visible" Anchor="Anchor.End" Elevation="0" Variant="@DrawerVariant.Temporary" ClipMode="DrawerClipMode.Always" Width="400px" Style="max-width:auto;">
    <MudDrawerHeader>
        <MudText Typo="Typo.h6">
            Create Account
        </MudText>
    </MudDrawerHeader>
    <MudStack Class="px-6">
        @if (Account is not null)
        {
            <EditForm Model="@Account" OnValidSubmit="SubmitAsync">
                <MudTextField T="string" Label="E-Mail" Variant="Variant.Text" Margin="Margin.Dense" @bind-Value="Account.Email" For="@(() => Account.Email)" Required="true" />
                <MudTextField T="string" Label="E-Mail (Confirmation)" Variant="Variant.Text" Margin="Margin.Dense" @bind-Value="Account.EmailConfirm" For="@(() => Account.EmailConfirm)" Required="true" />
                <MudTextField T="string" Label="Password" Variant="Variant.Text" Margin="Margin.Dense" @bind-Value="Account.Password" For="@(() => Account.Password)" Required="true"
                          InputType="@PasswordInput" Adornment="Adornment.End" AdornmentIcon="@PasswordIcon" OnAdornmentClick="TogglePasswordVisible" />
                <MudTextField T="string" Label="Password (Confirmation)" Variant="Variant.Text" Margin="Margin.Dense" @bind-Value="Account.PasswordConfirm" For="@(() => Account.PasswordConfirm)" Required="true"
                          InputType="@PasswordConfirmInput" Adornment="Adornment.End" AdornmentIcon="@PasswordConfirmIcon" OnAdornmentClick="TogglePasswordConfirmVisible" />

                <MudStack Justify="Justify.Center" Row Class="mt-7">
                <MudButton OnClick="()=>_visible = false" 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.Success" Style="width: 100%;">
                    Create
                    </MudButton>
                    </MudStack>
                    </EditForm>
        }
    </MudStack>
</MudDrawer>

@code {
    private bool _visible;
    private bool PasswordVisible { get; set; }
    private bool PasswordConfirmVisible { get; set; }
    private string PasswordIcon { get; set; } = Icons.Material.Filled.VisibilityOff;
    private string PasswordConfirmIcon { get; set; } = Icons.Material.Filled.VisibilityOff;
    private InputType PasswordInput { get; set; } = InputType.Password;
    private InputType PasswordConfirmInput { get; set; } = InputType.Password;

    public void Toggle()
    {
        _visible = !_visible;
        StateHasChanged();
    }

    private void TogglePasswordVisible()
    {
        if (PasswordVisible)
        {
            PasswordVisible = false;
            PasswordIcon = Icons.Material.Filled.VisibilityOff;
            PasswordInput = InputType.Password;
        }
        else
        {
            PasswordVisible = true;
            PasswordIcon = Icons.Material.Filled.Visibility;
            PasswordInput = InputType.Text;
        }
    }

    private void TogglePasswordConfirmVisible()
    {
        if (PasswordConfirmVisible)
        {
            PasswordConfirmVisible = false;
            PasswordConfirmIcon = Icons.Material.Filled.VisibilityOff;
            PasswordConfirmInput = InputType.Password;
        }
        else
        {
            PasswordConfirmVisible = true;
            PasswordConfirmIcon = Icons.Material.Filled.Visibility;
            PasswordConfirmInput = InputType.Text;
        }
    }
}