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

@Directive({
    selector: '[throttledMousemove]',
})
export class ThrottledMouseMoveDirective {
    @Input('throttledMousemove')
    public maxTriggersPerMilliseconds: number;

    @Output()
    public onThrottledMouseMove =
        new EventEmitter<Event>();

    public isEnabled = true;

    @HostListener('mousemove', ['$event'])
    public mousemove(event: Event) {
        this.throttleMovement(event);
    }

    @HostListener('touchmove', ['$event'])
    public touchmove(event: Event) {
        this.throttleMovement(event);
    }

    public throttleMovement(event: Event) {
        if (this.isEnabled) {
            this.isEnabled = false;
            setTimeout(() => {
               this.isEnabled = true;
            }, this.maxTriggersPerMilliseconds);
            this.onThrottledMouseMove.emit(
                event,
            );
        }
    }
}