import {
    Directive, HostListener, ComponentRef, ViewContainerRef, Input, ComponentFactoryResolver, ComponentFactory
} from '@angular/core';

import { FbTooltipComponent } from './fbTooltip.component';

@Directive({
    selector: '[fbTooltip]'
})
export class FbTooltipDirective {

    @Input() fbTooltip: string | FbTooltipComponent;
    @Input() tooltipDisabled: boolean;
    @Input() tooltipAnimation: boolean = true;
    @Input() tooltipPlacement: 'top' | 'bottom' | 'left' | 'right' = 'top';
    @Input() tooltipDelay: number = 0;

    private tooltip: ComponentRef<FbTooltipComponent>;
    private visible: boolean;

    constructor(public viewContainerRef: ViewContainerRef,
        private readonly resolver: ComponentFactoryResolver) {
    }

    @HostListener('focusin')
    @HostListener('mouseenter')
    show(): void {
        if (this.tooltipDisabled || this.visible) { return; }

        this.visible = true;

        setTimeout(() => {

            if (typeof this.fbTooltip === 'undefined' || (typeof this.fbTooltip === 'string' && this.fbTooltip === '') || !this.visible) {
                this.visible = true;
                this.hide();
            } else if (typeof this.fbTooltip === 'string') {
                const factory: ComponentFactory<FbTooltipComponent> = this.resolver.resolveComponentFactory(FbTooltipComponent);
                if (!this.visible) { return; }

                if (this.tooltip) {
                    this.tooltip.destroy();
                }

                this.tooltip = this.viewContainerRef.createComponent(factory);
                this.tooltip.instance.hostElement = this.viewContainerRef.element.nativeElement;
                this.tooltip.instance.fbTooltip = this.fbTooltip as string;
                this.tooltip.instance.placement = this.tooltipPlacement;
                this.tooltip.instance.animation = this.tooltipAnimation;

            } else {
                const tooltip: FbTooltipComponent = this.fbTooltip as FbTooltipComponent;
                tooltip.hostElement = this.viewContainerRef.element.nativeElement;
                tooltip.placement = this.tooltipPlacement;
                tooltip.animation = this.tooltipAnimation;
                tooltip.show();
            }
        }, this.tooltipDelay);
    }

    @HostListener('focusout')
    @HostListener('mouseleave')
    hide(): void {
        if (!this.visible) { return; }

        this.visible = false;
        if (this.tooltip) {
            this.tooltip.destroy();
        } else if (this.fbTooltip instanceof FbTooltipComponent) {
            (this.fbTooltip as FbTooltipComponent).hide();
        }
    }
}