import Icons from "@supersoniks/concorde/core/components/ui/icon/icons";
import { css, LitElement, nothing, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { DirectiveResult } from "lit/directive.js";
import { UnsafeHTMLDirective } from "lit/directives/unsafe-html.js";

const tagName = "sonic-icon";
/**
 * Afficher l'icone choisie parmis une liste prédéfinie dans icons.json
 * les tailles suivantes sont disponible via l'attribut *size* : 2xs,xs,sm,"",lg,xl,2xl
 */
@customElement(tagName)
export class Icon extends LitElement {
  static styles = css`
    :host {
      line-height: 0.1em;
      width: fit-content;
      height: fit-content;
      vertical-align: -0.125em;
      flex-shrink: 0;
    }

    svg {
      height: var(--_sc-icon-size, 1em);
      width: calc(var(--_sc-icon-size, 1em) * 1.4);
      overflow: visible;
    }

    svg:not([fill="none"]) {
      fill: currentColor;
    }

    svg[fill="none"] {
      stroke-width: 2;
    }

    :host([size="2xs"]) svg {
      --_sc-icon-size: 0.625em;
    }

    :host([size="xs"]) svg {
      --_sc-icon-size: 0.75em;
    }

    :host([size="sm"]) svg {
      --_sc-icon-size: 0.875em;
    }

    :host([size="lg"]) svg {
      --_sc-icon-size: 1.25em;
    }

    :host([size="xl"]) svg {
      --_sc-icon-size: 1.5em;
    }

    :host([size="2xl"]) svg {
      --_sc-icon-size: 2em;
    }

    :host([size="3xl"]) svg {
      --_sc-icon-size: 2.8em;
    }
  `;
  async updateIcon() {
    this.iconText = await Icons.default.get({
      name: this.name,
      prefix: this.prefix,
      library: this.library,
    });
  }

  @state() iconText: DirectiveResult<typeof UnsafeHTMLDirective> | string = "";

  /**
   * Nom identifiant l'icone ex : *info*
   */
  @property({ type: String }) name = "";

  /**
   * prefix de l'icone si nécessaire ex: *solid*. La valeur par défaut est "" qui est mappée sur *regular*
   */
  @property({ type: String }) prefix = "";

  /**
   * library de l'icone url vers un dossier en lign conenant des icônes
   */
  @property({ type: String }) library = "";

  connectedCallback() {
    this.setAttribute("aria-hidden", "true");
    super.connectedCallback();
  }
  willUpdate(changedProperties: PropertyValues): void {
    if (
      changedProperties.has("name") ||
      changedProperties.has("prefix") ||
      changedProperties.has("library")
    ) {
      this.updateIcon();
    }
    super.willUpdate(changedProperties);
  }

  render() {
    if (!this.iconText) {
      return nothing;
    }
    return this.iconText;
  }
}