import { Directive, ElementRef, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { View } from '@nativescript/core';
import { BaseValueAccessor } from './base-value-accessor';

const TEXT_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => TextValueAccessor),
  multi: true,
};

export type TextView = { text: string } & View;

/**
 * The accessor for writing a text and listening to changes that is used by the
 * {@link NgModel} directives.
 *
 *  ### Example
 *  ```
 *  <TextField [(ngModel)]="model.test">
 *  ```
 */
@Directive({
  selector:
    'TextField[ngModel],TextField[formControlName],TextField[formControl],' +
    'textField[ngModel],textField[formControlName],textField[formControl],' +
    'textfield[ngModel],textfield[formControlName],textfield[formControl],' +
    'text-field[ngModel],text-field[formControlName],text-field[formControl],' +
    'TextView[ngModel],TextView[formControlName],TextView[formControl],' +
    'textView[ngModel],textView[formControlName],textView[formControl],' +
    'textview[ngModel],textview[formControlName],textview[formControl],' +
    'text-view[ngModel],text-view[formControlName],text-view[formControl],' +
    'SearchBar[ngModel],SearchBar[formControlName],SearchBar[formControl],' +
    'searchBar[ngModel],searchBar[formControlName],searchBar[formControl],' +
    'searchbar[ngModel],searchbar[formControlName],searchbar[formControl],' +
    'search-bar[ngModel], search-bar[formControlName],search-bar[formControl]',
  providers: [TEXT_VALUE_ACCESSOR],
  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
  host: {
    '(blur)': 'onTouched()',
    '(textChange)': 'onChange($event.value)',
  },
})
export class TextValueAccessor extends BaseValueAccessor<TextView> {
  // tslint:disable-line:directive-class-suffix
  constructor(elementRef: ElementRef) {
    super(elementRef.nativeElement);
  }

  writeValue(value: any): void {
    const normalized = super.normalizeValue(value ? `${value}` : value);
    this.view.text = normalized;
  }
}
