import { Component, Directive, ElementRef, Input, ComponentFactoryResolver, HostListener, ViewContainerRef, OnChanges, AfterViewInit } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { RdLib } from '../../base/rdLib';

@Component({
  template: `
    {{parent.text}}
  `
})
export class TooltipContent extends RdComponent implements AfterViewInit {
  constructor(private element: ElementRef) { super(); }

  parent;

  ngAfterViewInit() {
    let text = this.parent.text.replace(/\n/g, "<br/>");
    var target = RdLib.screenOperations.getFirstChildWithWidth(this.parent.view.element);
    if (!target) return;
    var dxInstance = this.jQuery(this.element.nativeElement).dxTooltip({
      position: "top",
      target: target,
      visible: true,
      showEvent: "mouseenter",
      hideEvent: "mouseleave",
      contentTemplate: function (data) { data.html(text); }.bind(this)
    }).dxTooltip("instance");

    // jQuery(target).hover(() => dxInstance.show(), () => dxInstance.hide());
  }
}

@Directive({
  selector: '[rd-tooltip]'
})
export class Tooltip extends RdComponent implements OnChanges {
  constructor(private loader: ComponentFactoryResolver, private view: ViewContainerRef) {
    super();
  }

  @Input("rd-tooltip") text: string | number;

  @HostListener('mouseover', ['$event.target']) onHover(btn) {
    if (!this.initiated) {
      this.init();
      this.initiated = true;
    }
  }
  
  contentReferance;
  private initiated;

  ngOnChanges(changes) {
    if (changes.text && this.initiated) this.init();
  }

  init() {
    if (!this.text) return;
    if (this.contentReferance) this.contentReferance.destroy();
    let factory = this.loader.resolveComponentFactory(TooltipContent);
    let ref = this.view.createComponent(factory);
    ref.instance["parent"] = this;
    this.contentReferance = ref;

    ref.changeDetectorRef.detectChanges();
  }
}