@using Iceshrimp.Frontend.Core.Services
@using Iceshrimp.Shared.Schemas.Web
@inject EmojiService EmojiService

@if (_display)
{
    <div @ref="EmojiPickerRef" @onfocusout="Close" class="emoji-picker @(Fixed ? "fixed" : "")" tabindex="0">
        @foreach (var el in EmojiList)
        {
            <div class="emoji">
                <img @onclick="() => Select(el)" src="@el.PublicUrl" alt="@el.Name"/>
            </div>
        }
    </div>
}

@code {
    [Parameter]                  public          bool                         Fixed    { get; set; }
    [Parameter] [EditorRequired] public required EventCallback<EmojiResponse> OnEmojiSelect { get; set; }

    private List<EmojiResponse> EmojiList { get; set; } = [];
    private bool                _display = false;
    private ElementReference    EmojiPickerRef { get; set; }

    protected override async Task OnInitializedAsync()
    {
        EmojiList = await EmojiService.GetEmoji();
    }

    private async void Select(EmojiResponse emoji)
    {
        await OnEmojiSelect.InvokeAsync(emoji);
        _display = false;
        StateHasChanged();
    }

    private void Close()
    {
        _display = false;
        StateHasChanged();
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (_display)
        {
            EmojiPickerRef.FocusAsync();
        }
    }

    public async Task Toggle()
    {
        _display = !_display;
        await InvokeAsync(StateHasChanged);
    }
}