import { LitElement, html, css, PropertyValues } from 'lit';
import { customElement, property } from 'lit/decorators.js';

import { icons, IconName } from './icons';

@customElement('app-icon')
export class AppIcon extends LitElement {

  @property({ type: String })
  name: IconName = 'academicCap';

  @property({ type: Number })
  size = 16;

  @property({ type: String })
  color = '';

  static override styles = css`
    :host {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      width: var(--app-icon-size, 20px);
      height: var(--app-icon-size, 20px);

      color: var(--app-icon-color, currentColor);

      flex-shrink: 0;
      line-height: 0;
    }

    svg {
      width: 100%;
      height: 100%;
      display: block;
    }
  `;

  protected override updated(_changed: PropertyValues) {
    this.style.setProperty('--app-icon-size', `${this.size}px`);

    if (this.color)
      this.style.setProperty('--app-icon-color', this.color);
    else
      this.style.removeProperty('--app-icon-color');
  }

  override render() {

    const icon = icons[this.name];

    if (!icon) {
      console.warn(`Unknown icon '${this.name}'`);
      return html``;
    }

    return icon;
  }
}