/* tslint:disable:no-use-before-declare*/
import {
  Directive,
  ElementRef,
  HostListener,
  forwardRef,
  LOCALE_ID,
  Inject,
  Renderer2,
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { formatDate } from '@angular/common';

export const DATE_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => MwTimeValueDirective),
  multi: true,
};

@Directive({
  selector: '[mwUseValueAsTime]',
  providers: [DATE_VALUE_ACCESSOR],
})
export class MwTimeValueDirective implements ControlValueAccessor {
  @HostListener('input', ['$event.target.valueAsDate']) onChange: (
    _: any
  ) => void = (_: any) => {};
  @HostListener('blur', []) onTouched: () => void = () => {};

  constructor(
    @Inject(LOCALE_ID) private localeID: string,
    private renderer: Renderer2,
    private elementRef: ElementRef
  ) {}

  writeValue(value: Date | string | number): void {
    const type = typeof value;
    let valueAsString: string = null;

    if (type === 'object') {
      valueAsString = formatDate(value, 'HH:mm', this.localeID);
    } else if (type === 'number') {
      valueAsString = formatDate(new Date(value), 'HH:mm', this.localeID);
    } else if (type === 'string') {
      valueAsString = value as string;
    }
    this.renderer.setProperty(
      this.elementRef.nativeElement,
      'value',
      valueAsString
    );
  }

  registerOnChange(fn: (_: any) => void): void {
    this.onChange = fn;
  }
  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    this.renderer.setProperty(
      this.elementRef.nativeElement,
      'disabled',
      isDisabled
    );
  }
}