import {AfterContentInit, Component, ContentChild, HostBinding, Input} from '@angular/core';
import {InputRefDirectiveDirective} from "../common/input-ref-directive.directive";

@Component({
  selector: 'au-fa-input',
  templateUrl: './au-fa-input.component.html',
  styleUrls: ['./au-fa-input.component.css']
})
export class AuFaInputComponent implements AfterContentInit {
  @Input() icon: string;
  @ContentChild(InputRefDirectiveDirective) input: InputRefDirectiveDirective;
  constructor() { }

  ngAfterContentInit() {
    if(!this.input) {
      console.error('the au-fa-input nees an input inside of its content');
    }
    console.log('input', this.input);
  }
  @HostBinding('class.input-focus')
  get isInputFocus() {
    return this.input ? this.input.focus : false;
}

  get classes() {
    const cssClasses = {
      'fa': true,
    }
    if(this.icon) {
      cssClasses['fa-' + this.icon]  = true;
    }
    return cssClasses;
  }

}