@inject IJSRuntime JS
@inject State State
@inject ApiService api
@inject NavigationManager navigationManager
@inject NavigatorService navigatorService

<div class="overlay @(Active ? "active" : string.Empty)" data-ui="#@id"></div>
<dialog id="@id" class="@(Active ? "active" : string.Empty)" open="@Active">
  <h5>Share your status</h5>
  <div class="row">
    <div class="min square extra">
      <button class="transparent square extra no-margin">
        <object id="new-status-emoji" class="large emoji @(Emoji == null ? "animated" : string.Empty)" data-emoji="@(Emoji ?? "🫥")">@(Emoji ?? "🫥")</object>
        <menu class="no-wrap">
          <script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@@^1/index.js"></script>
          <emoji-picker emoji-version="15.1"></emoji-picker>
          <script>
            document.querySelector('emoji-picker')
              .addEventListener('emoji-click', event => {
                document.getElementById('new-status-emoji').setAttribute('data-emoji', event.detail.unicode)
                const input = document.getElementById('new-status-emoji-input')
                input.value = event.detail.unicode
                var event = new Event('change');
                input.dispatchEvent(event);
              })
          </script>
        </menu>
      </button>
    </div>
    <div class="field textarea border max">
      <textarea @bind="@Content" @bind:event="oninput" />
      <div class="right-align"><small class="@( Content.Length >= 500 ? "red" : Content.Length >= 260 ? "yellow-text" : "")">@Content.Length / 500</small></div>
    </div>
  </div>
  <nav class="right-align no-space">
    @if (State?.SelectedAddress?.Preferences?.Statuslog?.MastodonPosting ?? false) {
      <label class="checkbox">
        <InputCheckbox @bind-Value="postToMastodon"></InputCheckbox>
        <span>Post this to Mastodon</span>
      </label>
    }
    <InputText id="new-status-emoji-input" class="invisible" @bind-Value="Emoji"></InputText>
    <button class="transparent link" data-ui="#@id" disabled="@loading">Cancel</button>
    <button @onclick="PostStatus" disabled="@loading">
      @if (loading) {
        <span>Saving...</span>
      }
      else {
        <i class="fa-solid fa-floppy-disk"></i> <span>Save</span>
      }
      </button>
  </nav>
</dialog>

@code {
  [Parameter]
  public string? id { get; set; }
  [Parameter]
  public bool Active { get; set; }
  [Parameter]
  public string Content { get; set; } = string.Empty;
  [Parameter]
  public string? Emoji { get; set; } = null;
  [Parameter]
  public bool postToMastodon { get; set; } = true;

  private bool loading = false;

  public async Task PostStatus() {

    StatusPost post = new StatusPost {
        Emoji = Emoji,
        Content = Content
      };

    if (State?.SelectedAddress?.Preferences?.Statuslog?.MastodonPosting ?? false) {
      post.SkipMastodonPost = !postToMastodon;
    }

    if(Content.Length >= 500) {
      bool answer = await navigatorService.Page!.DisplayAlert(
        "Character limit reached", 
        "Your message is over 500 characters, which is a lot for a status.\n"
        + ((postToMastodon && !(post.SkipMastodonPost ?? true))? "If you continue, your post will not make it over to Mastodon.\n" : "")
        + "Do you wish to post it anyway?",
        "Yes", "No"
      );
      if (!answer) return;
    }

    loading = true;
    await InvokeAsync(StateHasChanged);
    var result = await api.StatusPost(State!.SelectedAddressName!, post);
    if(result != null){
      await State.RefreshStatuses();
      State.SendRefresh();
      await InvokeAsync(StateHasChanged);
      // navigationManager.NavigateTo("/statuslog/latest");
    }

    this.Active = false;
    await JS.InvokeVoidAsync("ui", "#" + id);
    Content = string.Empty;
    Emoji = null;
    postToMastodon = true;
    loading = false;
  }
}