import { AfterContentInit, AfterViewInit, Directive, ElementRef, Input, OnInit } from '@angular/core';
import { TextService } from '../services/text.service';



/**
 * yarn add better-scroll
 */


@Directive({
  selector: '[appScaleText]',
  providers: [TextService]
})
export class ScaleTextDirective implements AfterViewInit {

  @Input()
  offsetX = 0;

  private Element: ElementRef;
  private textService: TextService;
    constructor(textService: TextService, Element: ElementRef) {
      this.Element = Element;

  }
  ngAfterViewInit() {
    console.log(11111);
    console.log('this.Element', this.Element.nativeElement.textContent);
    let style = '';
    style = `display: initial;
    text-indent: initial;
    box-sizing: initial;
    line-height: initial;
    text-overflow: initial;
    word-spacing: normal;
    word-break: keep-all;
    white-space: nowrap;
    margin-left: 16px;
    `;
    const span = document.createElement('span');
    span.innerHTML = `${this.Element.nativeElement.textContent}`;
    span.style.cssText = style;
    this.Element.nativeElement.childNodes.forEach(n => n.remove());
    this.Element.nativeElement.append(span);
    setTimeout(() => {
      const fitWidth = this.Element.nativeElement.offsetWidth - 16;
      const textWidth = span.offsetWidth;
      console.log(textWidth, fitWidth);
      if (textWidth > fitWidth) {
        const scaleTo = fitWidth / textWidth;
        const offset = (fitWidth - textWidth) / 2;
        span.style.transform = `scale(${scaleTo})`;
        span.style.marginLeft = `${offset + this.offsetX}px`;
        span.style.display = 'inline-block';

      }
    });

  }
}
