@page "/editProfile"
@inject NavigationManager Nav
@inject ApiService 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"
                    AutoDownloadFontAwesome="false"
    >
      <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>
@if (markdownValue != null)
{
  <details id="advanced">
    <summary> Advanced </summary>
    <h5>Theme:</h5>
    <div class="row bottom-margin">
      <ThemeDialog id="theme-modal" onthemechanged="ThemeChanged"></ThemeDialog>
      <a data-ui="#theme-modal" class="row min" style="text-decoration:none;">
        @if(selectedTheme != null) {
          <ThemeCard theme="selectedTheme"></ThemeCard>
        }
        else {
          <button>Choose a theme</button>
        }
      </a>
    </div>
    <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 string? theme;
  private Theme? selectedTheme;
  private Dictionary<string, Theme>? themes;

  private bool loading = true;

  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;
      theme = data.Theme;

      themes = await State.GetThemes();
      selectedTheme = themes?[theme];

      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.PostProfile(State.SelectedAddressName!, 
      new PostProfile() {
        Content = markdownValue ?? string.Empty,
        Css = string.IsNullOrEmpty(css) ? null : css,
        Head = string.IsNullOrEmpty(head) ? null : head,
        Theme = string.IsNullOrEmpty(theme) ? null : theme
      });
    if (result != null) {
      await State.RefreshNow();
      await InvokeAsync(StateHasChanged);
      Nav.NavigateTo($"/person/{State.SelectedAddressName}#profile");
    }

    loading = false;
    await InvokeAsync(StateHasChanged);
  }

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

  public void ThemeChanged(Theme? _theme) {
    theme = _theme?.Id;
    selectedTheme = _theme;
    InvokeAsync(StateHasChanged);
  }
}