import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';

@Directive({
  selector: '[focusNav]'
})
export class FocusNavigatorDirective {

  initFocus: boolean = false;
  @Input("initFocus")
  public set input_initFocus(value) {
    this.initFocus = typeof value !== "undefined" && value !== false;
  }

  focusTag: string = 'focusNav';
  @Input("focusTag")
  public set input_focusTag(value) {
    this.focusTag = 'focusNav_' + value;

  }

  constructor(private elementRef: ElementRef, private renderer: Renderer2
  ) { }
  ngOnInit() {
    if (this.initFocus) {

    }

    this.renderer.addClass(this.elementRef.nativeElement, this.focusTag);
  }
  @HostListener('keydown', ['$event']) keyHandler(event: KeyboardEvent) {
    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
      if (!event.repeat && false === (event.target as HTMLInputElement).disabled) {
        //(event.target as HTMLInputElement).disabled = true;
        let fullText = (event.target as HTMLInputElement).value;
        var inputList = document.getElementsByClassName(this.focusTag);
        let index = 0;
        for (let i = 0; i < inputList.length; i++) {
          const element = inputList[i];
          if (element == this.elementRef.nativeElement) {
            index = i;
            break;
          }
        }
        do {

          index += event.key === 'ArrowDown' ? 1 : -1
          index = index == -1 ? 0 : index == inputList.length ? 0 : index;
          var inputElement = this.getFirstHtmlInputElement(inputList[index]);
          if (!inputElement.readOnly) inputElement.focus();
          if (index == 0 || index == (inputList.length - 1)) break;

        } while (inputElement.readOnly);
        //this.focusFirstHtmlInputElement(inputList[index]);
        //document.querySelectorAll('').
        event.preventDefault();
      }
    }
  }
  private focusFirstHtmlInputElement(target: Element) {
    if (target instanceof HTMLInputElement) {
      (target as HTMLInputElement).focus();

    } else {
      this.focusFirstHtmlInputElement(target.children[0])
    }
    // target.selectionStart = selectionEnd;
    // target.selectionEnd = selectionEnd;
  }

  private getFirstHtmlInputElement(target: Element): HTMLInputElement {
    if (target instanceof HTMLInputElement) {
      return (target as HTMLInputElement);
    } else {
      return this.getFirstHtmlInputElement(target.children[0]);
    }
    // target.selectionStart = selectionEnd;
    // target.selectionEnd = selectionEnd;
  }


  // private setCursorPosition(position) {
  //   let input = this.input.nativeElement;
  //   if (input.setSelectionRange) {
  //     input.focus();
  //     input.setSelectionRange(position, position);
  //   } else if (input.createTextRange) {
  //     var range = input.createTextRange();
  //     range.collapse(true);
  //     range.moveEnd('character', position);
  //     range.moveStart('character', position);
  //     range.select();
  //   }
  // }
}
