@inject ISecurityService securityService
@inject IJSRuntime jsRuntime

<div @ref=div>
    @if(newName is not null) {
        <label>@Label</label>
        <input type="text" autocomplete="off" @bind=newName/>
        <button class="secondary" @onclick=Cancel>Cancel</button>
        <button @onclick=Submit>OK</button>
    } else {
        <label>@(Label):</label>
        <a href="javascript:;" @onclick=Edit>
            @if(SecurityIdentifier is null || SecurityIdentifier == WellKnownSid.NullSid) {
                <i>Please select a user or group</i>
            } else {
                @name
            }
        </a>
    }
</div>

@code {
    [Parameter]
    public string Label { get; set; }

    [Parameter]
    public EventCallback<SecurityIdentifier> OnChange { get; set; }

    private bool    edit = false;
    private string? name;
    private string? newName;

    private ElementReference div;

    private HyperBooru.SecurityIdentifier? securityIdentifier;

    public SecurityIdentifier? SecurityIdentifier {
        get => securityIdentifier;
        set {
            securityIdentifier = value;
            name = value is null ? null : securityService.TranslateName(value);
        }
    }

    private void Edit() {
        newName = SecurityIdentifier == WellKnownSid.NullSid ? "" : name;
        StateHasChanged();
    }

    private async void Cancel() {
        newName = null;
        await jsRuntime.InvokeVoidAsync("removeClass", div, "bad-principal");
        StateHasChanged();
    }

    private async void Submit() {
        var sid = securityService.TranslateName(newName!);
        if(sid is null) {
            await jsRuntime.InvokeVoidAsync("cycleClass", div, "bad-principal");
            return;
        }

        await jsRuntime.InvokeVoidAsync("removeClass", div, "bad-principal");
        SecurityIdentifier = sid;
        await OnChange.InvokeAsync(sid);
        newName = null;
        StateHasChanged();
    }
}