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

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

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

  constructor(private renderer: Renderer2, private elementRef: ElementRef) {}

  writeValue(value: Date): void {
    // Workaround for native date picker which sets date according to UTC date part
    const dateValue = new Date(value);
    if (value.getUTCDate() !== value.getDate()) {
      dateValue.setUTCDate(value.getDate());
    }
    this.renderer.setProperty(
      this.elementRef.nativeElement,
      'valueAsDate',
      dateValue
    );
  }

  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
    );
  }
}