import { Component, OnInit, Input, ElementRef, ViewChild, AfterViewInit, forwardRef, Output, EventEmitter } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import * as moment from 'moment';

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR:any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => NeuInputComponent),
  multi: true
}

@Component({
  selector: 'neu-input',
  templateUrl: './neu-input.component.html',
  styleUrls: ['./neu-input.component.css'],
  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class NeuInputComponent implements ControlValueAccessor, AfterViewInit {

  private _value:any;
  get value() { 
    return this._value; 
  }
  @Input("value") set value(_val) {
    let _returnVal = _val;

    if(_val) {
      if(this.type=="datetime-local" && _val instanceof Date) {
        _val = moment(_val).format(moment.HTML5_FMT.DATETIME_LOCAL);
      }
      else if(this.type=="datetime-local" && typeof _val == "string") {
        _returnVal = moment(_val, moment.HTML5_FMT.DATETIME_LOCAL).toDate();
      }
      else if(this.type=="date" && _val instanceof Date) {
        _val = moment(_val).format(moment.HTML5_FMT.DATE);
      }
      else if(this.type=="date" && typeof _val == "string") {
        _returnVal = moment(_val, moment.HTML5_FMT.DATE).toDate();
      }
    }
    
    this._value = _val;
    if(this.onChangeCallback!=null) this.onChangeCallback(_returnVal);
  }

  @Input("type") type:any;
  @Input("required") required:any;
  @Input("disabled") disabled:boolean;
  @Input("name") name:any;
  @Input("maxlength") maxlength:any;
  @Input("minlength") minlength:any;
  @Input("placeholder") placeholder:any;
  @Input("size") size:any;
  @Input("pattern") pattern:any;
  @Input("max") max:any;
  @Input("min") min:any;
  @Input("step") step:any;
  @Input("cols") cols:any;
  @Input("rows") rows:any;
  @Input("focus") focus:boolean;

  @ViewChild("input", {static: false}) input:ElementRef;
  @ViewChild("textarea", {static: false}) textarea:ElementRef;

  @Output() focusInput:EventEmitter<boolean> = new EventEmitter;

  //placeholders per els callbacks provided per control value accessor
  private onTouchedCallback:() => void;
  private onChangeCallback: (_:any) => void;

  constructor() { }

  ngAfterViewInit() {
    //General
    if(this.type!="textarea") {
      if(this.value!=null) this.input.nativeElement.setAttribute("value", this.value);
      if(this.required!=null) this.input.nativeElement.required = true;
      if(this.disabled!=null && this.disabled==true) this.input.nativeElement.disabled = true;
      if(this.name!=null) this.input.nativeElement.setAttribute("name", this.name);
    }
    else {
      if(this.value!=null) this.textarea.nativeElement.setAttribute("value", this.value);
      if(this.required!=null) this.textarea.nativeElement.required = true;
      if(this.name!=null) this.textarea.nativeElement.setAttribute("name", this.name);
    }

    //properties by type
    switch(this.type) {
      case 'text':
        if(this.placeholder!=null) this.input.nativeElement.setAttribute("placeholder", this.placeholder);
        if(this.size!=null) this.input.nativeElement.setAttribute("size", this.size);
        if(this.pattern!=null) this.input.nativeElement.setAttribute("pattern", this.pattern);
        break;
      case 'tel':
        if(this.placeholder!=null) this.input.nativeElement.setAttribute("placeholder", this.placeholder);
        if(this.size!=null) this.input.nativeElement.setAttribute("size", this.size);
        if(this.pattern!=null) this.input.nativeElement.setAttribute("pattern", this.pattern);
        break;
      case 'number':
        if(this.max!=null) this.input.nativeElement.setAttribute("max", this.max);
        if(this.min!=null) this.input.nativeElement.setAttribute("min", this.min);
        if(this.step!=null) this.input.nativeElement.setAttribute("step", this.step);
        if(this.placeholder!=null) this.input.nativeElement.setAttribute("placeholder", this.placeholder);
        break;
      case 'email':
        if(this.placeholder!=null) this.input.nativeElement.setAttribute("placeholder", this.placeholder);
        if(this.size!=null) this.input.nativeElement.setAttribute("size", this.size);
        if(this.pattern!=null) this.input.nativeElement.setAttribute("pattern", this.pattern);
        break;
      case 'password':
        if(this.placeholder!=null) this.input.nativeElement.setAttribute("placeholder", this.placeholder);
        break;
      case 'time':
        if(this.max!=null) this.input.nativeElement.setAttribute("max", this.max);
        if(this.min!=null) this.input.nativeElement.setAttribute("min", this.min);
        if(this.step!=null) this.input.nativeElement.setAttribute("step", this.step);
        break;
      case 'date':
        if(this.max!=null) this.input.nativeElement.setAttribute("max", this.max);
        if(this.min!=null) this.input.nativeElement.setAttribute("min", this.min);
        if(this.step!=null) this.input.nativeElement.setAttribute("step", this.step);
        break;
      case 'datetime-local':
        if(this.max!=null) this.input.nativeElement.setAttribute("max", this.max);
        if(this.min!=null) this.input.nativeElement.setAttribute("min", this.min);
        if(this.step!=null) this.input.nativeElement.setAttribute("step", this.step);
        break;
      case 'textarea':
        if(this.cols!=null) this.textarea.nativeElement.setAttribute("cols", this.cols);
        if(this.rows!=null) this.textarea.nativeElement.setAttribute("rows", this.rows);
        if(this.placeholder!=null) this.textarea.nativeElement.setAttribute("placeholder", this.placeholder);
    }

    //focus
    if(this.focus) {
      if(this.type=="textarea") {
        this.textarea.nativeElement.focus();
      }
      else this.input.nativeElement.focus();
    }
  }

  writeValue(value) {
    this.value = value;
  }

  registerOnChange(fn:any) {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn:any) {
    this.onTouchedCallback = fn;
  }

}
