@page "/person/{Address}"
@inject State State
@inject IJSRuntime JS
@inject NavigationManager Nav


<div class="row center-align">
  <h3 class="page-heading"><i class="fa-solid fa-fw fa-at"></i>@Address</h3>
</div>
<div class="row center-align">
  <img class="profile avatar" src="https://profiles.cache.lol/@Address/picture" alt="@Address" />
</div>

<div class="responsive">
  <div class="tabs">
    <a data-ui="#profile" @onclick="ReloadProfile">
      <i class="fa-solid fa-id-card"></i>
      <span>@(Address).omg.lol</span>
    </a>
    <a data-ui="#statuses" class="active">
      <i class="fa-solid fa-message-smile"></i>
      <span>Status.lol</span>
    </a>
    <a data-ui="#pics">
      <i class="fa-solid fa-images"></i>
      <span>Some.pics</span>
    </a>
    @if(now != null){
      <a data-ui="#now" @onclick="ReloadNow">
        <i class="fa-duotone fa-seedling"></i>
        <span>/Now</span>
      </a>
    }
  </div>
</div>

<div class="responsive page-container">
  <div id="profile" class="page no-padding">
    <a href="@ProfileUrl" target="_blank" class="hover absolute top right chip fill large-elevate">Open in browser <i class="fa-solid fa-arrow-up-right-from-square tiny"></i></a>
    <ExternalPageComponent id="profile_page" @ref="ProfilePage" Url="@ProfileUrl"></ExternalPageComponent>
  </div>

  <div id="statuses" class="page padding active">
    <div id="info" class="box basis transparent">
      <article id="bio" class="container shadowed blue-2-bg gray-9-fg">
        @if (bio == null) {
          <p><progress class="circle small"></progress></p>
        }
        else {
          @bio
        }
      </article>
    </div>
    <StatusList @ref="StatusList" StatusFunc="@(async() => await State.GetStatuses(Address))" Editable="@Editable"></StatusList>
  </div>
  
  <div id="pics" class="page padding">
    <PicList @ref="PicList" PicsFunc="@(async() => await State.GetPics(Address))" Editable="@Editable"></PicList>
  </div>
  @if(now != null){
    <div id="now" class="page no-padding">
      <a href="@now.Url" target="_blank" class="hover absolute top right chip fill large-elevate">Open in browser <i class="fa-solid fa-arrow-up-right-from-square tiny"></i></a>
      <ExternalPageComponent id="now_page" @ref="NowPage" Url="@now.Url"></ExternalPageComponent>
    </div>
  }
</div>

@code {
  private string _address;
  [Parameter]
  public string Address { 
    get => _address;
    set {
      _address = value;
      if(StatusList != null) StatusList.StatusFunc = async () => await State.GetStatuses(_address);
      if(PicList != null) PicList.PicsFunc = async () => await State.GetPics(_address);
    }
  }
  public string ProfileUrl {
    get => $"https://{Address}.omg.lol/";
  }

  public ExternalPageComponent? NowPage { get; set; }
  public ExternalPageComponent? ProfilePage { get; set; }

  private StatusList StatusList { get; set; }
  private PicList PicList { get; set; }

  private bool Editable { 
    get => Address == State.SelectedAddressName;
  }

  private MarkupString? bio;

  private NowData? now;

  protected override async Task OnInitializedAsync() {
    List<NowData>? garden = await State.GetNowGarden();
    now = garden?.FirstOrDefault(n => n.Address == Address);
    await InvokeAsync(StateHasChanged);
    string fragment = new Uri(Nav.Uri).Fragment;
    await JS.InvokeVoidAsync("ui", fragment);
    if (fragment.EndsWith("now")) await ReloadNow();
    else if (fragment.EndsWith("profile")) await ReloadProfile();
    bio = await State.GetBio(Address);
  }

  private async Task ReloadNow() {
    if(NowPage != null) {
      await NowPage.Reload();
      await ResizeIframes();
    }
  }

  private async Task ReloadProfile() {
    if (ProfilePage != null) {
      await ProfilePage.Reload();
      await ResizeIframes();
    }
  }

  private async Task ResizeIframes() {
    await JS.InvokeVoidAsync("iframeResize", new { license = "GPLv3" });
  }
}