import {AfterContentInit, Component, ContentChild, Input, HostBinding } from '@angular/core';
import {InputRefDirective} from "../common/input-ref.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(InputRefDirective) input: InputRefDirective;

  constructor() { }

  ngAfterContentInit() {
    if(!this.input) {
      console.error('au-fa-input needs an input inside its content');
    }
  }

  @HostBinding('class.input-focus')
  get isInputFocus() {
    return this.input ? this.input.focus : false;
  }

  /*
  Display icon which is used as input into the component
   */
  get classes() {
    const cssClasses = {};

    if(this.icon) {
      cssClasses['fa-' + this.icon] = true;
    }

    return cssClasses;
  }
}