/**
 * 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} from 'lit';
import { customElement, property } from 'lit/decorators.js';
import {styles} from './nile-title.css';
import NileElement from '../internal/nile-element';

/**
 * Nile title component.
 *
 * @tag nile-title
 *
 */
@customElement('nile-title')
export class NileTitle extends NileElement {
  @property({ type: String }) headerText = '';

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

  /**
   * The styles for nile-title
   * @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];
  }

  /* #endregion */

  /* #region Methods */

  /**
   * Called when the component is updated
   */
  protected updated(_changedProperties: Map<string | number | symbol, unknown>): void {
    super.updated(_changedProperties);
    this.updateDocumentTitle();
  }

  /**
   * Updates the document title based on pageTitle or headerText
   */
  private updateDocumentTitle(): void {
    document.title = this.pageTitle || this.headerText;
  }

  /**
   * Render method
   * @slot This is a slot test
   */
  public render(): TemplateResult {
    return html` ${this.headerText ? html` ${this.headerText} ` : ''} `;
  }

  /* #endregion */
}

export default NileTitle;

declare global {
  interface HTMLElementTagNameMap {
    'nile-title': NileTitle;
  }
}