@page "/editProfile"
@inject NavigationManager Nav
@inject RestService api
@inject State State


<div class="max markdown-editor">
  <MarkdownEditor @ref="Editor"
                  @bind-Value="@markdownValue"
                  Theme="material-darker"
                  MaxHeight="100%" />
</div>

<details id="advanced">
  <summary> Advanced </summary>
  <small>Style you include here will be places in a &lt;style&gt; element in your page’s &lt;head&gt;.</small>
  <div class="field textarea label border max">
    <InputTextArea @bind-Value="css"></InputTextArea>
    <label>Custom CSS</label>
  </div>
  <small>Anything you put here will be included in your page’s &lt;head&gt; element.</small>
  <div class="field textarea label border max">
    <InputTextArea @bind-Value="head"></InputTextArea>
    <label>Additional &lt;head&gt; Content</label>
  </div>
</details>

<nav>
  <div class="max"></div>
  <button class="transparent link" onclick="history.back();" disabled="@loading">Cancel</button>
  <button @onclick="Save" disabled="@loading">
    @if (loading) {
      <span>Saving...</span>
    }
    else {
      <i class="fa-solid fa-floppy-disk"></i> <span>Save & Publish</span>
    }
  </button>
</nav>

@code {
  private MarkdownEditor? Editor;
  private string? markdownValue;
  private string? css;
  private string? head;

  private bool loading = false;

  protected override async Task OnInitializedAsync() {
    await base.OnInitializedAsync();
    ProfileResponseData? data = await api.GetProfile(State.SelectedAddressName!);
    if (data != null) {
      markdownValue = data.Content;
      css = data.Css;
      head = data.Head;

      await Editor!.SetValueAsync(markdownValue);
    }
    await InvokeAsync(StateHasChanged);
  }

  Task OnMarkdownValueChanged(string value) {
    return Task.CompletedTask;
  }

  public async Task Save() {
    loading = true;
    await InvokeAsync(StateHasChanged);
    var result = await api.PostProfile(State.SelectedAddressName!, 
      new PostProfile() {
        Content = markdownValue ?? string.Empty,
        Css = string.IsNullOrEmpty(css) ? null : css,
        Head = string.IsNullOrEmpty(head) ? null : head
      });
    if (result != null) {
      await State.RefreshNow();
      await InvokeAsync(StateHasChanged);
      Nav.NavigateTo($"/person/{State.SelectedAddressName}#profile");
    }

    loading = false;
  }
}