import {
  Component,
  ChangeDetectionStrategy,
  HostBinding,
  ViewEncapsulation,
  ContentChild,
  AfterContentInit,
  Input,
} from '@angular/core';
import { UiInputDirective } from './input';
import { UiLabelComponent } from './label';

@Component({
  selector: 'ui-form-field',
  templateUrl: 'form-field.component.html',
  styleUrls: ['form-field.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class UiFormFieldComponent implements AfterContentInit {
  @HostBinding('class')
  clazz = 'ui-form-field';

  @ContentChild(UiInputDirective, { read: UiInputDirective }) input: UiInputDirective;

  @ContentChild(UiLabelComponent, { read: UiLabelComponent }) label: UiLabelComponent;

  @HostBinding('class.ui-form-field--readonly')
  isReadonly() {
    return this.input?.readonly;
  }

  constructor() {}

  ngAfterContentInit(): void {
    if (this.input && this.label) {
      this.input.placeholder = this.label.elementRef.nativeElement.textContent;
    }
  }
}
