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

<dialog class="dialog" @ref="EmojiPickerRef">
    <div class="emoji-picker" style="--top: @(_top)px; --left: @(_left)px">
        @foreach (var el in EmojiList)
        {
            <div class="emoji">
                <img @onclick="() => Select(el)" src="@el.PublicUrl" alt="@el.Name"/>
            </div>
        }
    </div>
    <ClosingBackdrop OnClose="Close"></ClosingBackdrop>
</dialog>


@code {
    private EventCallback<EmojiResponse> OnEmojiSelect  { get; set; }
    private List<EmojiResponse>          EmojiList      { get; set; } = [];
    private ElementReference             EmojiPickerRef { get; set; }
    private float                        _top;
    private float                        _left;
    private IJSInProcessObjectReference  _module = null!;

    protected override async Task OnInitializedAsync()
    {
        GlobalComponentSvc.EmojiPicker = this;
        EmojiList                      = await EmojiService.GetEmoji();
        _module = (IJSInProcessObjectReference)await Js.InvokeAsync<IJSObjectReference>("import",
                                                                                        "./Components/EmojiPicker.razor.js");
    }

    private async void Select(EmojiResponse emoji)
    {
        await OnEmojiSelect.InvokeAsync(emoji);
    }

    private void Close()
    {
        _module.InvokeVoid("closeDialog", EmojiPickerRef);
    }

    public void Open(ElementReference root, EventCallback<EmojiResponse> func)
    {
        OnEmojiSelect = func;
        var pos = _module.Invoke<List<float>>("getPosition", root);
        _left = pos[0];
        _top  = pos[1];
        StateHasChanged();
        _module.InvokeVoid("openDialog", EmojiPickerRef);
    }
}