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

<RefreshButton></RefreshButton>

<PageHeading title="Eph.emer.al" icon="fa-light fa-comment-dots">
  <Description><a href="https://eph.emer.al">Eph.emer.al</a> is a place for fleeting thoughts. Everything on this page will disappear after a while.</Description>
</PageHeading>

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

  @if (messages != null) {
    foreach (MarkupString message in messages) {
      <article class="ephemeral center">
        @message
      </article>
    }
  }

  <LoadingCard id="ephemeral-loading" icon="fa-light fa-comment-dots"></LoadingCard>
</div>

@code {
  private List<MarkupString>? messages;

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

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

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