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

import {
    DefaultTrackingService,
} from './../../services/index';

@Directive({
    selector: '[tracking]',
})
export class TrackingDirective {
    @Input()
    public tracking: { [key: string]: string };

    constructor(
        private _trackingDefaultService: DefaultTrackingService,
    ) {}

    @HostListener('click')
    public onClick() {
        this._sendEvents(
            this.tracking,
            'click',
        );
    }

    @HostListener('drop')
    public onDrop() {
        this._sendEvents(
            this.tracking,
            'drop',
        );
    }

    @HostListener('dragstart')
    public onDragStart() {
        this._sendEvents(
            this.tracking,
            'dragstart',
        );
    }

    @HostListener('dragend')
    public onDragEnd() {
        this._sendEvents(
            this.tracking,
            'dragend',
        );
    }

    private _sendEvents(
        events: { [key: string]: string },
        eventType: string,
    ) {
        Object.keys(events).forEach((eventName) => {
            this._trackingDefaultService.sendEvent({
                name: eventName,
                properties: {
                    type: eventType,
                    value: events[eventName],
                },
            });
        });
    }
}