@using Iceshrimp.Shared.Schemas.Web
@using Iceshrimp.Assets.PhosphorIcons
@using Iceshrimp.Frontend.Localization
@using Microsoft.Extensions.Localization
@inject IStringLocalizer<Localization> Loc;
@inject IJSRuntime                     Js;
@if (NoteBase.Cw != null)
{
    <div class="cw">
        <span class="cw-field">@NoteBase.Cw</span><button class="cw-button" @onclick="ToggleCw" @onclick:stopPropagation="true">Toggle CW</button>
    </div>
    <div hidden="@_cwToggle" class="note-body @(_cwToggle ? "hidden" : "") @(Indented ? "indent" : "")" @ref="Body">
        <span>
            @if (ReplyInaccessible)
            {
                <span class="reply-inaccessible">
                    <Icon Name="Icons.ArrowBendLeftUp"/><Icon Name="Icons.Lock"/>
                </span>
            }
            <MfmText Text="@NoteBase.Text" Emoji="@NoteBase.Emoji"/>
        </span>
        @if (NoteBase.Attachments.Count > 0)
        {
            <NoteAttachments Attachments="NoteBase.Attachments"/>
        }
    </div>
}
@if (NoteBase.Cw == null)
{
    <div class="note-content @(!_showFull ? "collapsed" : "")">
        @if (_overHeight & !_showFull)
        {
        <button class="truncate-btn" @onclick="ToggleTruncate" @onclick:stopPropagation="true">
            <span>@Loc["Show more"]</span>
        </button>
        }
        <div
            class="note-body @(_overHeight ? "too-long" : "") @(Indented ? "indent" : "") @(_showFull ? "show-full" : "")" @ref="Body">
            <span>
                @if (ReplyInaccessible)
                {
                    <span class="reply-inaccessible">
                        <Icon Name="Icons.ArrowBendLeftUp"/><Icon Name="Icons.Lock"/>
                    </span>
                }
                <MfmText Text="@NoteBase.Text" Emoji="@NoteBase.Emoji"/>
            </span>
            @if (NoteBase.Attachments.Count > 0)
            {
                <NoteAttachments Attachments="NoteBase.Attachments"/>
            }
        </div>
        @if (_overHeight & _showFull)
        {
        <button class="truncate-btn show-less" @onclick="ToggleTruncate" @onclick:stopPropagation="true">
            <span>@Loc["Show less"]</span>
        </button>
        }
    </div>
}


@code {
    [Parameter] public required NoteBase NoteBase          { get; set; }
    [Parameter] public required bool     OverLength        { get; set; }
    [Parameter] public          bool     Indented          { get; set; }
    [Parameter] public          bool     ReplyInaccessible { get; set; }

    private IJSObjectReference? Module { get; set; }
    private ElementReference    Body   { get; set; }
    private bool                _showFull    = false;
    private bool                _cwToggle    = true;
    private bool                _overHeight = false;
    private bool                _flag         = false;

    protected override async Task OnInitializedAsync()
    {
        Module = await Js.InvokeAsync<IJSObjectReference>("import", "./Components/Note/NoteBody.razor.js");
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender == false)
        {
            if (Module != null && _flag == false)
            {
                var computedHeight = await Module.InvokeAsync<float>("getComputedHeight", Body);
                if (computedHeight > 40)
                {
                    _overHeight = true;
                    StateHasChanged();
                }
                _flag         = true;
            }
        }
    }

    private void ToggleCw()
    {
        _cwToggle = !_cwToggle;
        StateHasChanged();
    }

    private void ToggleTruncate()
    {
        _showFull = !_showFull;
    }
}