/**
 * @module modules/favorites-sk
 * @description <h2><code>favorites-sk</code></h2>
 *
 * @evt
 *
 * @attr
 *
 * @example
 */
import { html } from 'lit-html';
import { define } from '../../../elements-sk/modules/define';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';
import { jsonOrThrow } from '../../../infra-sk/modules/jsonOrThrow';
import { Favorites } from '../json';
import '../window/window';
import { errorMessage } from '../../../elements-sk/modules/errorMessage';

export class FavoritesSk extends ElementSk {
  private favoritesConfig: Favorites | null = null;

  constructor() {
    super(FavoritesSk.template);
  }

  private static template = (ele: FavoritesSk) => html`
    <header><h1 class="name">Favorites</h1></header>
    <hr />
    ${ele.getSectionsTemplate()}
  `;

  private getSectionsTemplate() {
    const sections = this.favoritesConfig?.sections;
    if (sections == null || sections.length === 0) {
      return html`No favorites have been configured for this instance.`;
    }
    return html`${sections.map(
      (section) =>
        html` <div class="section">
            <h3>${section.name}</h3>
            <table>
              <tr>
                <th>Link</th>
                <th>Description</th>
              </tr>
              ${section.links?.map(
                (link) => html`
                  <tr>
                    <td><a href=${link.href}>${link.text}</a></td>
                    <td>${link.description}</td>
                  </tr>
                `
              )}
            </table>
          </div>
          <hr />`
    )}`;
  }

  async connectedCallback(): Promise<void> {
    super.connectedCallback();
    this._render();
    if (this.favoritesConfig == null) {
      try {
        const response = await fetch('/_/favorites/');
        const json = await jsonOrThrow(response);
        this.favoritesConfig = json;
        this._render();
      } catch (error) {
        errorMessage(String(error));
      }
    }
  }
}

define('favorites-sk', FavoritesSk);