/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */

import {
  LitElement,
  html,
  CSSResultArray,
  TemplateResult,
  PropertyValues,
} from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles } from './nile-error-notification.css';

/**
 * Nile icon component.
 *
 * @tag nile-error-notification
 *
 */
@customElement('nile-error-notification')
export class NileErrorNotification extends LitElement {
  /**
   * The styles for ErrorNotification
   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
   */
  public static get styles(): CSSResultArray {
    return [styles];
  }

  // Represents the error message to be displayed to the user.
  @property({ type: String, reflect: true  }) errorMessage: string = '';

  @property({ type: String, reflect: true  }) color: string = '';
  protected updated(_changedProperties: PropertyValues): void {
    if(_changedProperties.has('color')){
      this.style.setProperty('--indication-color',this.color)
    }
  }

  /* #endregion */

  /* #region Methods */

  /**
   * Render method
   * @slot This is a slot test
   */
  public render(): TemplateResult {
    return html`
      <div class="nile-error-notification" part="container">
        <nile-icon
          name="var(--nile-icon-info, var(--ng-icon-info-circle))"
          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
          size="14"
          class="nile-error-notification__icon"
          part="icon"
          color="var(--indication-color)"
        ></nile-icon>
        <span part="message">
          ${this.errorMessage}
        </span>
      </div>
    `;
  }

  /* #endregion */
}

export default NileErrorNotification;

declare global {
  interface HTMLElementTagNameMap {
    'nile-error-notification': NileErrorNotification;
  }
}