import {
  AfterViewInit,
  Directive,
  ElementRef,
  Inject,
  PLATFORM_ID,
} from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

/**
 * Removes excess text from element until it fits in elements
 * and appends a ellipsis symbol to end of text. This requires that
 * the elements height be fixed and it's `overflow` css property
 * be `hidden`
 *
 * @example
 * ```html
 * <p mwEllipsis>Ullamco esse laborum</p>
 * ```
 *
 */
@Directive({
  selector: '[mwEllipsis]',
})
export class MwEllipsisDirective implements AfterViewInit {
  private ellipsisChar = '…';

  /**
   * If true means the elements contents are larger
   * than the size of the element.
   */
  private get hasOverflow(): boolean {
    const el: HTMLElement = this.el.nativeElement;
    return el.scrollHeight > el.offsetHeight;
  }

  constructor(
    private el: ElementRef,
    @Inject(PLATFORM_ID) private platformId
  ) {}

  public ngAfterViewInit(): void {
    const isBrowser = isPlatformBrowser(this.platformId);
    if (isBrowser) {
      this.clipText();
    }
  }

  /**
   * Removes character from end of `innerText`
   * until text fits in element and appends
   * a ellipsis symbol to the end.
   */
  private clipText(): void {
    const el: HTMLElement = this.el.nativeElement;
    let text = el.innerHTML.split(' ');
    while (this.hasOverflow && text.length > 0) {
      text = text.slice(0, -1);
      el.innerHTML = `${text.join(' ')}${this.ellipsisChar}`;
    }
  }
}