@page "/pics"
@inject State State
@inject IJSRuntime JS


<div class="row center-align">
  <h3>
    <i class="fa-solid fa-images"></i> Some.pics
  </h3>
</div>
<div class="row center-align">
  <p>Sit back, relax, and look at <a href="https://some.pics/">some.pics</a></p>
</div>

<AuthorizeView>
  <Authorized>
    <button class="fab circle extra large-elevate" data-ui="#post-modal">
      <i class="fa-solid fa-camera-retro"></i>
    </button>
    <NewPicDialog id="post-modal"></NewPicDialog>
  </Authorized>
</AuthorizeView>

<template id="PicCard">
  <article class="no-padding">
    <img src="{{Pic.Url}}" loading="lazy">
    <div class="padding">
      <nav>
        <a class="author" href="/person/{{Pic.Address}}#pics">
          <i class="fa-solid fa-fw fa-at"></i>{{Pic.Address}}
        </a>
        <span class="max"></span>
        <a class="chip transparent-border right">
          <i class="fa fa-clock"></i> {{Pic.RelativeTime}}
        </a>
        <span class="max"></span>
        <button class="right-align share-button transparent circle">
          <input type="hidden" name="url" value="{{Pic.Url}}" />
          <input type="hidden" name="description" value="{{Pic.Description}}" />
          <i class="fa-solid fa-share-nodes"></i>
        </button>
      </nav>
      <p class="description">{{Pic.Description}}</p>
      <nav>
        <div class="max"></div>
        @* @if (Editable) {
          <button @onclick="EditPic"><i class="fa-solid fa-pencil"></i> Edit</button>
        } *@
        
      </nav>
    </div>
  </article>
</template>

<div id="pics" class="responsive card-grid">
  @* <PicList PicsFunc="@State.VirtualPicsFunc()"></PicList> *@
  <article id="pics-loading" class="middle-align center-align">
    <div>
      <i class="extra fa-solid fa-images"></i>
      <div class="space"></div>
      <progress class="circle"></progress>
    </div>
  </article>
</div>

<script>
  const template = document.getElementById("PicCard")
  let cSharp;
  async function renderPics(somePics) {
    for(const pic of somePics){
      const clone = template.content.cloneNode(true)
      let html = clone.children[0].innerHTML

      html = html.replaceAll("{{Pic.Url}}", pic.url)
      html = html.replaceAll("{{Pic.Address}}", pic.address)
      html = html.replaceAll("{{Pic.RelativeTime}}", pic.relativeTime)
      html = html.replaceAll("{{Pic.Description}}", pic.description)

      clone.children[0].innerHTML = html

      clone.querySelector('.share-button').addEventListener('click', shareClick)
      document.getElementById("pics").insertBefore(clone, document.getElementById("pics-loading"))
    }
  }
  async function clearLoading() {
    document.getElementById("pics-loading").remove()
  }

  async function shareClick(e) {
    const url = this.querySelector('input[name="url"]')?.value
    const desc = this.querySelector('input[name="description"]')?.value
    if (cSharp) cSharp.invokeMethodAsync('ShareClick', url, desc)
  }

  async function setDotNetHelper(helper) {
    cSharp = helper;
  }
</script>

@code {
  private List<Pic> pics;
  private DotNetObjectReference<Pics>? objRef;

  protected override void OnInitialized() {
    objRef = DotNetObjectReference.Create(this);
  }

  protected override async Task OnAfterRenderAsync(bool firstRender) {
    await base.OnAfterRenderAsync(firstRender);
    if (firstRender) {
      await JS.InvokeVoidAsync("setDotNetHelper", objRef);
      RestService api = new RestService();
      if (pics == null || pics.Count == 0) pics = await api.SomePics();

      int page_size = 1;
      for(int i = 0; i < pics.Count; i += page_size) {
        await JS.InvokeVoidAsync("renderPics", pics.Skip(i * page_size).Take(page_size));
      }
      await JS.InvokeVoidAsync("clearLoading");
    }
  }

  [JSInvokable]
  public async Task ShareClick(string? url, string? description) {
    await Share.Default.RequestAsync(new ShareTextRequest {
        Uri = url,
        Text = description,
        Title = "I saw this on some.pics",
        Subject = "I saw this on some.pics"
      });
  }
}