@page "/editNow"
@inject NavigationManager Nav
@inject RestService api
@inject State State
@inject IJSRuntime JS

<div class="max markdown-editor">
  @if (markdownValue != null)
  {
    <MarkdownEditor @ref="Editor"
                    @bind-Value="@markdownValue"
                    Theme="material-darker"
                    MaxHeight="100%"
                    CustomButtonClicked="@OnCustomButtonClicked">
      <Toolbar>
        <MarkdownToolbarButton Action="MarkdownAction.Bold" Icon="fa-solid fa-bold" Title="Bold" />
        <MarkdownToolbarButton Action="MarkdownAction.Italic" Icon="fa-solid fa-italic" Title="Italic" />
        <MarkdownToolbarButton Action="MarkdownAction.Heading" Icon="fa-solid fa-heading" Title="Heading" />
        <MarkdownToolbarButton Action="MarkdownAction.Code" Icon="fa-solid fa-code" Title="Code" Separator="true" />
        <MarkdownToolbarButton Action="MarkdownAction.Quote" Icon="fa-solid fa-quote-left" Title="Quote" />
        <MarkdownToolbarButton Action="MarkdownAction.UnorderedList" Icon="fa-solid fa-list-ul" Title="Unordered List" />
        <MarkdownToolbarButton Action="MarkdownAction.OrderedList" Icon="fa-solid fa-list-ol" Title="Ordered List" />
        <MarkdownToolbarButton Action="MarkdownAction.Link" Icon="fa-solid fa-link" Title="Link" Separator="true" />
        <MarkdownToolbarButton Action="MarkdownAction.Image" Icon="fa-solid fa-image" Title="Image" />
        <MarkdownToolbarButton Action="MarkdownAction.HorizontalRule" Icon="fa-solid fa-horizontal-rule" Title="Horizontal Rule" />
        <MarkdownToolbarButton Action="MarkdownAction.Guide" Icon="fa-solid fa-circle-question" Title="Guide" Separator="true" />
        <MarkdownToolbarButton Action="MarkdownAction.Custom" Icon="omg-icon omg-prami" Title="Editor Information" Name="Help" />
      </Toolbar>
    </MarkdownEditor>
  }
</div>

<nav>
  <label class="checkbox" disabled="@loading">
    <InputCheckbox @bind-Value="listed" disabled="@loading"></InputCheckbox>
    <span>Include my page in the Now Garden</span>
  </label>
  <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</span>
    }
  </button>
</nav>

@code {
  private MarkdownEditor? Editor;
  private bool listed;
  private string? markdownValue;

  private bool loading = true;

  protected override async Task OnInitializedAsync() {
    await base.OnInitializedAsync();
    NowContentData? data = await api.GetNowPage(State.SelectedAddressName!);
    if (data != null)
    {
      listed = data.Listed == 1;
      markdownValue = data.Content;

      loading = false;
      await InvokeAsync(StateHasChanged);

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

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

  public async Task Save() {
    loading = true;
    await InvokeAsync(StateHasChanged);
    var result = await api.PostNowPage(State.SelectedAddressName!, markdownValue ?? string.Empty, listed);
    if (result != null) {
      await State.RefreshNow();
      await InvokeAsync(StateHasChanged);
      Nav.NavigateTo($"/person/{State.SelectedAddressName}#now");
    }

    loading = false;
  }

  public async Task OnCustomButtonClicked(MarkdownButtonEventArgs eventArgs) {
    if (eventArgs.Name == "Help") {
      await JS.InvokeVoidAsync("open", "https://home.omg.lol/info/editor", "_blank");
    }
  }
}