import { 
  Directive,
  ElementRef, 
  HostListener, 
  Input, 
  Renderer2, 
  OnInit, 
  OnDestroy } from '@angular/core';
import {  SpyService } from "../services";

@Directive({
  selector: '[spyOn]' //<a [spyOn]="[eventName1, eventName2]">Sample</a>
})
export class SpyDirective implements OnInit, OnDestroy{

  private listerner: () => void;
  
  /**
   * must be standard angular event name 
   * spying ativity is restricted to the following events:
   */
  @Input('spyOn') events: string[];

  private activityEvents: string[] = [ 
    'load', 'online', 'offline', 'focus', 'blur', 'submit', 'resize',
    'scroll', 'select', 'cut', 'copy', 'paste', 'mousemove', 'click', 
    'dbclick', 'contextmenu', 'wheel'
  ];
  
  private customActivityEvents: string[] = [
    'session', 'user', 'page', 'track', 'share'
  ];

  constructor(
    private el: ElementRef, 
    private activitySpy:  SpyService, 
    private renderer: Renderer2
  ){}

  ngOnInit(){
    this.events.forEach((eventName) => {
      this.listerner = this.renderer.listen(
        this.el.nativeElement, 
        eventName, 
        (event) => {

        /**
         * for session spy activation
        */
        if(eventName == 'load'){
          this.activitySpy.activate();
        }
          
        /**
         * for event based activity tracking
         */
        if(this.activityEvents.includes(eventName)){
          this.activitySpy.detect(
            eventName, 
            this.el.nativeElement.tagName, 
            this.el.nativeElement.textContent
          );
        }
        
        /**
         * custom acitivity tracking
         */
        if(this.customActivityEvents.includes(eventName)){
          this.activitySpy[eventName]();          
        }
        
      });
    });
  }
  
  ngOnDestroy(){
    this.listerner();
  }
 
}