@using Iceshrimp.Assets.PhosphorIcons
@using Iceshrimp.Frontend.Components
@using Iceshrimp.Frontend.Localization
@using Microsoft.Extensions.Localization
@inject IStringLocalizer<Localization> Loc;
@implements IDisposable
@inject NavigationManager              Navigation;

<div @ref="SidebarElementRef" @onfocusout="Close" class="sidebar @(_open ? "open" : "")" tabindex=0>
    <div class="header">
        <account-dropdown/>
    </div>
    <div class="nav">
        <NavLink href="/" Match="NavLinkMatch.All">
            <div class="sidebar-btn">
                <Icon Name="Icons.House"/>
                <span class="text">@Loc["Timeline"]</span>
            </div>
        </NavLink>
        <NavLink href="/notifications">
            <div class="sidebar-btn">
                <Icon Name="Icons.Bell"/>
                <span class="text">@Loc["Notifications"]</span>
            </div>
        </NavLink>
        <NavLink href="/search">
            <div class="sidebar-btn">
                <Icon Name="Icons.MagnifyingGlass"/>
                <span class="text">@Loc["Search"]</span>
            </div>
        </NavLink>
        <NavLink href="/follow-requests">
            <div class="sidebar-btn">
                <Icon Name="Icons.HandWaving"/>
                <span class="text">@Loc["Follow requests"]</span>
            </div>
        </NavLink>
    </div>
    <hr class="rule"/>
    <button class="sidebar-btn post-btn" @onclick="Open">
        <Icon Name="Icons.Pencil"></Icon>@Loc["Post"]
    </button>
</div>

<div class="bottom-bar">
    <div class="bottom-nav">
        <button @onclick="ToggleSidebar" class="bottom-bar-btn">
            <Icon Name="Icons.List"/>
        </button>
        <NavLink href="/">
            <div class="bottom-bar-btn">
                <Icon Name="Icons.House"/>
            </div>
        </NavLink>
        <NavLink href="/notifications">
            <div class="bottom-bar-btn">
                <Icon Name="Icons.Bell"/>
            </div>
        </NavLink>
        <div>
            <button @onclick="Open" class="bottom-bar-btn">
                <Icon Name="Icons.Pencil"/>
            </button>
        </div>
    </div>

</div>

<Compose @ref="_compose"/>

@code {
    private Compose          _compose = null!;
    private bool             _open    = false;
    private ElementReference SidebarElementRef { get; set; }

    private async void Open()
    {
        await _compose.OpenDialog();
    }

    private void ToggleSidebar()
    {
        _open = !_open;
        StateHasChanged();
    }

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

    private void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        _open = false;
        StateHasChanged();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (_open) await SidebarElementRef.FocusAsync();
    }

    protected override void OnInitialized()
    {
        Navigation.LocationChanged += HandleLocationChanged;
    }

    public void Dispose()
    {
        Navigation.LocationChanged -= HandleLocationChanged;
    }
}