import { AfterViewInit } from '@angular/core';
import { RdComponent } from './rdComponent';
import { AppComponent } from '../app.component';

/**
 * // showEvent: "mouseenter","dxclick"
 * // hideEvent: "mouseleave", 
 */

export abstract class RdPopOver extends RdComponent implements AfterViewInit {
  element;
  target;
  onOpen = function (data) { };
  onClose = function (data) { };
  dxPopoverInstance;
  shading = true;

  protected width = 300;

  ngAfterViewInit() {
    var container = this.jQuery(this.element.nativeElement);
    this.dxPopoverInstance = container.dxPopover({
      target: this.target.nativeElement,
      position: "top",
      width: this.width,
      shading: this.shading,
      shadingColor: "rgba(0, 0, 0, 0.5)",
      animation: {
        show: {
          type: "pop",
          from: { scale: 0 },
          to: { scale: 1 }
        },
        hide: {
          type: "pop",
          from: { scale: 1 },
          to: { scale: 0 }
        }
      }
    }).dxPopover("instance");
    this.dxPopoverInstance.show();
  }

  close(data?) {
    this.dxPopoverInstance.hide();
    AppComponent.instance.popoverInstance.close(data);
  }

  dismiss() {
    AppComponent.instance.popoverInstance.close(undefined);
  }
}