/**
 * 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, nothing, PropertyValues} from 'lit';
import { customElement, query, property, state } from 'lit/decorators.js';
import {styles} from './nile-form-help-text.css';
import { classMap } from 'lit/directives/class-map.js';

/**
 * Nile icon component.
 *
 * @tag nile-form-help-text
 *
 */
@customElement('nile-form-help-text')
export class NileFormHelpText extends LitElement {
  /**
   * The styles for FormHelpText
   * @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];
  }

  @property({ type: Boolean, reflect: true  }) isExpanded: boolean = false;

  @state() showButton: boolean = false;

  @query('.help__text__full') textContainer:HTMLSpanElement;

  private resizeObserver:ResizeObserver;

  /* #endregion */

  /* #region Methods */

  protected firstUpdated(_changedProperties: PropertyValues): void {
    this.resizeObserver=this.observeWidthChange(this.textContainer);
  }

  disconnectedCallback(): void {
    this.resizeObserver.disconnect();
  }

  /**
   * Render method
   * @slot This is a slot test
   */
  public render(): TemplateResult {
    const iconName = this.isExpanded ? 'var(--nile-icon-arrow-up, var(--ng-icon-chevron-up))' : 'var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))';

    return html`
    <div 
      class="${classMap({
        'nile-form-help-text':true,
        "nile-form-help-text--expanded":this.isExpanded
        })}" 
      part="container"
    >
      <span
        class="${classMap({
          "help__text__full":true,
          "help__text__full--expanded":this.isExpanded
          })}"
        >
        <slot @slotchange="${this.decideToToggleShowButton}"></slot>
      </span>
      ${this.showButton?html`
        <span
          class="nile-form-help-text__more-button"
          part="toggle-button"
          @click=${this.toggleExpanded}
        >${this.isExpanded ? 'View Less' : 'View More'}
          <nile-icon color="#005EA6" part="icon" size="14" name="${iconName}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
        </span>
      `:nothing}
    </div>
  `;
  }

  toggleExpanded() {
    this.isExpanded = !this.isExpanded;
  }
  
  decideToToggleShowButton(){
    if(!this.textContainer) return;
    this.showButton=this.textContainer.clientWidth<this.textContainer.scrollWidth
  }

  /**
   * Logs whenever the width of an element changes.
   * @param {HTMLElement} element - The element to observe for width changes.
   */
  observeWidthChange(element:HTMLElement) {

    const resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
        const newWidth = entry.contentRect.width;
        if (newWidth) this.decideToToggleShowButton();
      }
    });

    resizeObserver.observe(element);

    return resizeObserver; // Return observer to allow disconnection if needed
  }
}

export default NileFormHelpText;

declare global {
  interface HTMLElementTagNameMap {
    'nile-form-help-text': NileFormHelpText;
  }
}