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

@if (_display)
{
    <div class="emoji-picker @(Fixed ? "fixed" : "")">
        @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;

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

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

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