@page "/directory"
@implements IDisposable
@inject IJSRuntime JS
@inject State State

<RefreshButton></RefreshButton>

<PageHeading title="Address Directory" icon="fa-duotone fa-address-book">
  <Description>Welcome to the <a href="https://home.omg.lol/directory">omg.lol member directory</a>! Everyone here is awesome. <i class="fa-solid fa-sparkles"></i></Description>
</PageHeading>

<div id="directory" class="responsive">

  @if (addresses != null) {
    @* TODO: Display avatar and address name, grouped by starting letter? *@
  }

  <LoadingCard id="address-loading" icon="fa-duotone fa-address-book"></LoadingCard>
</div>

@code {
  private List<string>? addresses;

  protected override async Task OnInitializedAsync() {
    await base.OnInitializedAsync();
    if (addresses == null || addresses.Count == 0) addresses = await State.GetDirectory();
    State.PropertyChanged += StateChanged;
    State.CanRefresh = true;
    await InvokeAsync(StateHasChanged);
    await JS.InvokeVoidAsync("removeElementById", "address-loading");
  }

  private async void StateChanged(object? sender, PropertyChangedEventArgs e) {
    if (e.PropertyName == nameof(State.IsRefreshing) && State.IsRefreshing) {
      addresses = await State.GetDirectory(true);
      State.IsRefreshing = false;
    }
  }

  public void Dispose() {
    State.PropertyChanged -= StateChanged;
    State.CanRefresh = false;
  }
}