@page "/feed"
@implements IDisposable
@inject IJSRuntime JS
@inject State State
@inject NavigationManager Nav

<RefreshButton></RefreshButton>

<PageHeading title="Timeline" icon="fa-solid fa-list-timeline">
  <Description>A feed of all the statuses and pics of the people you follow.</Description>
</PageHeading>

@if(!(State.Following?.Any() ?? false)) {
  <PageHeading title="" icon="fa-light fa-face-sad-sweat">
    <Description>
      It looks like you're not following anyone yet.
    </Description>
  </PageHeading>
  <p class="center-align">Check out the <a href="/directory">Directory</a> (or other parts of the app) to find awesome people to follow.</p>
}
else {
  <div class="responsive">
    <div class="tabs scroll">
      <a data-ui="#feed" class="active">
        <i class="fa-solid fa-list-timeline"></i>
        <span>Timeline</span>
      </a>
      <a data-ui="#following">
        <i class="fa-duotone fa-address-book"></i>
        <span>Following</span>
      </a>
    </div>
  </div>

  <div class="responsive page-container">
    <div id="feed" class="page no-padding active">
      @if (feed != null){
        foreach (StatusOrPic item in feed) {
          if (item.IsStatus) {
            <StatusCard Status="@item.Status"></StatusCard>
          }
          else if (item.IsPic) {
            <PicCard Pic="@item.Pic"></PicCard>
          }
        }
      }
      <LoadingCard id="feedLoading" icon="fa-solid fa-list-timeline"></LoadingCard>
    </div>

    <div id="following" class="page no-padding">
      <ul>
        @foreach (string address in State.Following ?? new List<string>()) {
          string displayAddress = address;
          string linkAddress = address;
  @*         if (group.Key == "😀") {
            try {
              linkAddress = idn.GetAscii(address);
              displayAddress = $"{address} {linkAddress}";
            }
            catch (Exception) { }
          } *@
          <li class="vertical-margin row padding surface-container">
            <img class="round" src="https://profiles.cache.lol/@linkAddress/picture">
            <div class="max">
              <a href="/person/@linkAddress" class="address"><i class="fa-solid fa-fw fa-at tiny"></i>@displayAddress</a>
            </div>
            <button id="follow-button" @onclick="() => UnfollowClick(address)">
              <i class="fa-solid fa-minus"></i> Unfollow
            </button>
          </li>
        }
      </ul>
    </div>
  </div>
}

@code {
  private IOrderedEnumerable<StatusOrPic>? feed;

  protected override async Task OnInitializedAsync() {
    await base.OnInitializedAsync();
    string fragment = new Uri(Nav.Uri).Fragment;
    await JS.InvokeVoidAsync("ui", fragment);
    if (feed == null || feed.Count() == 0) feed = await State.GetFeed();
    State.PropertyChanged += StateChanged;
    State.CanRefresh = true;
    await InvokeAsync(StateHasChanged);
    await JS.InvokeVoidAsync("removeElementById", "feedLoading");
  }

  private async void StateChanged(object? sender, PropertyChangedEventArgs e) {
    if (e.PropertyName == nameof(State.IsRefreshing) && State.IsRefreshing) {
      using (State.GetRefreshToken()) {
        feed = await State.GetFeed(true);
        await InvokeAsync(StateHasChanged);
      }
    }
  }

  public async Task UnfollowClick(string address) {
    await State.Unfollow(address);
    feed = await State.GetFeed(forceRefresh: true);
    await InvokeAsync(StateHasChanged);
  }

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