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


<div class="row center-align">
  <h3><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 id="bio" class="center-align max">
  @if (bio == null)
  {
    <p><em>Getting Bio...</em></p>
  }
  else {
    @bio
  }
</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">
    <StatusList StatusFunc="@State.VirtualStatusesFunc(Address)"></StatusList>
  </div>
  
  <div id="pics" class="page padding">
    @if(Editable){
      <EditPicDialog @ref="editPicDialog" id="EditPicModal"></EditPicDialog>
    }
    <PicList PicsFunc="@State.VirtualPicsFunc(Address)" Editable="@Editable" Dialog="@editPicDialog"></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 {
  [Parameter]
  public string Address { get; set; }
  public string ProfileUrl {
    get => $"https://{Address}.omg.lol/";
  }

  private EditPicDialog? editPicDialog { get; set; }
  public ExternalPageComponent? NowPage { get; set; }
  public ExternalPageComponent? ProfilePage { get; set; }

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

  private MarkupString? bio;

  private NowData? now;

  protected override async Task OnInitializedAsync() {
    bio = await State.GetBio(Address);
    List<NowData> garden = await State.GetNowGarden();
    now = garden.FirstOrDefault(n => n.Address == 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" });
  }
}