/**
 * @module modules/rotations-sk
 * @description <h2><code>rotations-sk</code></h2>
 *
 * Custom element for displaying current rotations for Skia, GPU, Android, and Infra.
 */
import { html } from 'lit-html';
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
import { define } from '../../../elements-sk/modules/define';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';
import { Rotation } from '../tree-status-sk/tree-status-sk';

export class RotationsSk extends ElementSk {
  private _rotations: Array<Rotation> = [];

  private static template = (el: RotationsSk) => html`
    <div class="table">
      ${el._rotations.map(
        (rotation) => html`
          <a
            class="tr"
            href=${rotation.docLink}
            target="_blank"
            rel="noopener noreferrer">
            <div class="td">
              ${unsafeHTML(
                `<${rotation.icon}-icon-sk></${rotation.icon}-icon-sk>`
              )}
              ${rotation.role}: ${rotation.name}
            </div>
          </a>
        `
      )}
    </div>
  `;

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

  connectedCallback() {
    super.connectedCallback();
    this._render();
  }

  set rotations(value: Array<Rotation>) {
    this._rotations = value;
    this._render();
  }
}

define('rotations-sk', RotationsSk);