@using Iceshrimp.Assets.PhosphorIcons
@using Iceshrimp.Frontend.Core.Services
@using Iceshrimp.Frontend.Localization
@using Iceshrimp.Shared.Schemas
@using Microsoft.Extensions.Localization
@inject IStringLocalizer<Localization> Loc;
@inject IJSRuntime                     Js;
@inject SessionService                 Session;

<div class="note-footer">
    @if (Reactions.Count > 0)
    {
        <div class="reactions">
            @foreach (var reaction in Reactions)
            {
                <NoteReaction Reaction="reaction"/>
            }
        </div>
    }
    <button class="btn" @onclick="Reply" @onclick:stopPropagation="true">
        <Icon Name="Icons.ArrowUUpLeft" Size="1.3em"/>
    </button>
    <button class="btn" @onclick="Renote" @onclick:stopPropagation="true">
        @if (RenotePossible)
        {
            <Icon Name="Icons.Repeat" Size="1.3em"/>
        }
        else
        {
            <Icon Name="Icons.Lock" Size="1.3em"/>
        }
        @if (Renotes > 0)
        {
            <span class="renote-count">@Renotes</span>
        }
    </button>
    <button @onclick="Like" @onclick:stopPropagation="true" class="btn">
        @if (IsLiked)
        {
            <Icon Name="Icons.Heart" Pack="IconStyle.Fill" Size="1.3em"/>
        }
        else
        {
            <Icon Name="Icons.Heart" Size="1.3em"/>
        }
        @if (Likes > 0)
        {
            <span class="like-count">@Likes</span>
        }
    </button>
    <button class="btn positioned" @onclick="ToggleEmojiPicker" @onclick:stopPropagation="true">
        <Icon Name="Icons.Smiley" Size="1.3em"/>
        <EmojiPicker @ref="EmojiPicker" OnEmojiSelect="React"/>
    </button>
    <button class="btn" @onclick="Quote" @onclick:stopPropagation="true">
        <Icon Name="Icons.Quotes" Size="1.3em"/>
    </button>
    <button class="btn positioned" @onclick="ToggleMenu" @onclick:stopPropagation="true">
        <Icon Name="Icons.DotsThreeOutline" Size="1.3em"/>
        <Menu @ref="Menu">
            @if (NoteComponent.Note.User.Id == Session.Current?.Id)
            {
                <MenuElement Icon="Icons.Trash" OnSelect="NoteComponent.Delete">
                    <Text>@Loc["Delete"]</Text>
                </MenuElement>
            }
            <MenuElement Icon="Icons.ArrowSquareOut" OnSelect="OpenOriginal">
                <Text>@Loc["Open original page"]</Text>
            </MenuElement>
        </Menu>
    </button>
</div>

@code {
    [Parameter] [EditorRequired] public required List<NoteReactionSchema> Reactions      { get; set; }
    [Parameter] [EditorRequired] public required int                      Likes          { get; set; }
    [Parameter] [EditorRequired] public required bool                     IsLiked        { get; set; }
    [Parameter] [EditorRequired] public required int                      Renotes        { get; set; }
    [Parameter]                  public          bool                     RenotePossible { get; set; }
    private                                      EmojiPicker              EmojiPicker    { get; set; } = null!;
    private                                      Menu                     Menu           { get; set; } = null!;

    [CascadingParameter] NoteComponent NoteComponent { get; set; } = null!;

    private void ToggleMenu() => Menu.Toggle();

    private void Delete() => NoteComponent.Delete();

    private void OpenOriginal() => Js.InvokeVoidAsync("open", NoteComponent.Note.Url, "_blank");

    private void Like()
    {
        NoteComponent.Like();
    }

    private void Reply()
    {
        NoteComponent.Reply();
    }

    private void Renote()
    {
        if (RenotePossible) NoteComponent.Renote();
    }

    private void Quote()
    {
        NoteComponent.DoQuote();
    }

    private async Task ToggleEmojiPicker()
    {
        await EmojiPicker.Toggle();
    }

    private void React(EmojiResponse emoji)
    {
        NoteComponent.React(emoji.Name, true, emoji.PublicUrl);
    }
}