import { Directive, ElementRef, HostListener, OnInit, Input } from '@angular/core';

@Directive({
  selector: '[ang-responsive-fit]'
})

export class ResponsiveFitDirective implements OnInit {

  @Input('ang-responsive-fit') limit: number;

  native: HTMLInputElement;
  tmpSpan: HTMLSpanElement;
  initWidth: number;
  
  constructor(private ref: ElementRef) {
    this.native = this.ref.nativeElement;
  }

  @HostListener('input')
  onInput(){
    this.tmpSpan.innerHTML = this.native.value;
    document.body.append(this.tmpSpan);
    const contentWidth = this.tmpSpan.offsetWidth;
    this.tmpSpan.remove();

    if(contentWidth > this.initWidth - 5 && contentWidth < this.limit){
        this.native.style.width = contentWidth + 5 + 'px';
    }
    else if(contentWidth < this.limit){
      this.native.style.width = this.initWidth + 'px';
    }

  }

  ngOnInit(){
    const {font, wordSpacing, letterSpacing, width, paddingLeft, paddingRight} = getComputedStyle(this.native);
    this.initWidth = parseInt(width);
    this.tmpSpan = document.createElement('span');

    Object.assign(
      this.tmpSpan.style,
      { whiteSpace: 'nowrap'},
      {font,wordSpacing,letterSpacing}
    );

    if(!this.limit){
      this.limit = window.innerWidth - parseInt(paddingLeft) - parseInt(paddingRight) - 10;
    }

  }

}