/**
 * Directiva para mostrar tooltips.
 * Lyons SAS
 * 
 * @author Jimmy Castellanos <jacastellanosc@gmail.com>
 */
import { Directive, OnDestroy, HostListener, ElementRef } from '@angular/core';

@Directive({
    selector: '[title]'
})
export class TooltipDirective implements OnDestroy {

    private id: string;

    constructor(private element: ElementRef) {

    }

    @HostListener('mouseenter', ['$event'])
    onMouseEnter(event: MouseEvent): void {
        let elm = jQuery(this.element.nativeElement);
        let title_tmp = elm.attr("title");
        if(title_tmp != ""){
            elm.attr("title", "");
            elm.attr("tooltip", title_tmp);
        }
        let X = event.clientX;
        let Y = event.clientY + elm.height() + 5;
        let html: string = "";
        this.id = "tooltip_" + (new Date().getTime()).toString();
        let tooltipText = elm.attr("tooltip");
        html = `
        <div id="` + this.id + `" class="simple-tooltip">
        ` + tooltipText + `
        </div>
        `;
        jQuery("body").append(html);
        jQuery("#" + this.id).css({
            'top': Y,
            'left': X
        });
    }

    @HostListener('mousemove', ['$event'])
    onMouseMove(event: MouseEvent): void {
        let elm = jQuery(this.element.nativeElement);
        let X = event.clientX;
        let Y = event.clientY + elm.height() + 5;
        jQuery("#" + this.id).css({
            'top': Y,
            'left': X
        });
    }

    @HostListener('mouseleave')
    onMouseLeave(): void {
        jQuery("#" + this.id).remove();
    }

    ngOnDestroy(): void {
        jQuery("#" + this.id).remove();
    }


}