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

@Directive({
  selector: '[appFocusNextInput]'
})
export class FocusNextInputDirective {
  @Input('appFocusNextInput') eventEmitter!: EventEmitter<string>;

  constructor(private renderer: Renderer2) { }

  ngOnInit() {
    // TODO:
		// 1: don't need to listen all events
		// 2: not working in safari
    this.eventEmitter.subscribe(elementId => {
      try {
        const element = this.renderer.selectRootElement(elementId)
        setTimeout(() => {
          element.focus();
          element.click();
        }, 0);
      } catch (ex) {
        (document.activeElement as HTMLElement).blur();
        // If the element doesn't exist or if the element disappears when this called then no need to do anything
      }
    });
  }

}