Neighbourhood.omg.lol/Components/ThemeDialog.razor

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

<div class="overlay @(Active ? "active" : string.Empty)" data-ui="#@id"></div>
<dialog id="@id" class="@(Active ? "active" : string.Empty)" open="@Active" style="overflow:auto;">
  <h5>Choose a theme</h5>
  <nav class="wrap max">
    @if(themes != null) foreach(Theme theme in themes.Values) {
      <a onclick="@(() => ClickTheme(theme))" class="min" style="text-decoration:none;">
        <ThemeCard theme="@theme"></ThemeCard>
      </a>
    }
  </nav>
  <nav class="right-align no-space">
    <button class="transparent link" data-ui="#@id">Cancel</button>
  </nav>
</dialog>

<div class="overlay" data-ui="#@previewId"></div>
<dialog id="@previewId" style="overflow:auto;">
  <h5 class="honey">@activeTheme?.Name</h5>
  <div class="max">
    <p>@((MarkupString)(activeTheme?.Description ?? string.Empty)) A theme by <a href="@activeTheme?.AuthorUrl" target="_blank">@activeTheme?.Author</a>.</p>
    @if(themePreview != null) {
      <ExternalPageComponent id="profile_page" @ref="iframe" SrcString="@themePreview.ToString()"></ExternalPageComponent>
    }
  </div>
  <nav class="right-align no-space">
    <button class="transparent link" @onclick="CancelPreview">Back</button>
    <button @onclick=UseTheme><i class="fa-solid fa-palette"></i> Use the @activeTheme?.Name theme</button>
  </nav>
</dialog>

@code {
  private Dictionary<string, Theme>? themes;
  [Parameter]
  public string? id { get; set; }
  private string? previewId { get => $"{id}-preview"; }
  [Parameter]
  public bool Active { get; set; }
  [Parameter]
  public Action<Theme?>? onthemechanged { get; set; }

  private Theme? activeTheme { get; set; }
  private MarkupString? themePreview { get; set; }
  private ExternalPageComponent iframe { get; set; }

  protected override async Task OnInitializedAsync() {
    await base.OnInitializedAsync();
    activeTheme = null;
    themes = await State.GetThemes();
    await InvokeAsync(StateHasChanged);
  }

  public async Task ClickTheme(Theme theme) {
    activeTheme = theme;
    await InvokeAsync(StateHasChanged);
    await JS.InvokeVoidAsync("ui", "#" + id);
    await JS.InvokeVoidAsync("ui", "#" + previewId);
    themePreview = await api.GetThemePreview(theme.Id);
    await InvokeAsync(StateHasChanged);
    @* iframe.SrcString = themePreview.ToString(); *@
    await iframe.Reload();
  }

  public async Task CancelPreview() {
    activeTheme = null;
    await InvokeAsync(StateHasChanged);
    await JS.InvokeVoidAsync("ui", "#" + previewId);
    await JS.InvokeVoidAsync("ui", "#" + id);
  }

  public async Task UseTheme() {
    // todo: update theme
    onthemechanged?.Invoke(activeTheme);
    activeTheme = null;
    await InvokeAsync(StateHasChanged);
    await JS.InvokeVoidAsync("ui", "#" + previewId);
  }
}