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

@Directive({
  selector: '[dcPopover]'
})
export class PopoverDirective {
  @Input() dcPopover: string;
  @Input() options: any;

  titleBox: any;
  htmlStr: string;
  space: any;

  constructor(private el: ElementRef) {
  }

  @HostListener('mouseenter')
  onMouseEnter() {
    this.showTitle();
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    setTimeout(() => {
      this.hideTitle();
    }, 20);
  }

  showTitle() {
    if (!this.titleBox) {
      const ele = document.createElement('div');
      const offset = this.options.offset || 'down';
      let empos = '';
      ele.className = 'dc-popover-tip';
      ele.style.position = 'absolute';
      ele.style.zIndex = '1';
      ele.style.width = this.options.width || '280px';
      this.space = this.options.space || '10px';
      this.el.nativeElement.style.position = 'relative';
      this.el.nativeElement.style.overflow = "visible";

      this.titleBox = ele;
      if (offset === 'up') {
        ele.style.paddingLeft = this.options.left || '0px';
        const height = this.titleBox.offsetHeight;
        if (this.options.tablePop) {
          ele.style.bottom = '40px';
        } else {
          ele.style.bottom = (height + 20) + 'px';
        }
        ele.style.paddingBottom = this.space;
        empos = 'transform:rotate(-135deg);bottom:-5px;left:10px;';
      } else if (offset === 'left') {
        ele.style.left = '-' + ele.style.width;
        ele.style.top = '-10px';
        ele.style.paddingRight = this.options.space || '10px';
        if (this.options.tablePop) {
          empos = 'transform:rotate(135deg);right:-5px;top:24px;';
        } else {
          empos = 'transform:rotate(135deg);right:-5px;top:15px;';
        }
      } else if (offset === 'leftTop') {
        ele.style.left = '-' + ele.style.width;
        ele.style.top = '5px';
        ele.style.paddingRight = this.options.space || '10px';
        empos = 'transform:rotate(135deg);right:-5px;top:10px;';
      } else if (offset === 'leftBottom') {
        ele.style.left = '-' + ele.style.width;
        ele.style.bottom = '5px';
        ele.style.paddingRight = this.options.space || '10px';
        empos = 'transform:rotate(135deg);right:-5px;bottom:20px;';
      } else if (offset === 'right') {
        ele.style.right = '-' + (ele.style.width);
        ele.style.top = '-10px';
        ele.style.paddingLeft = this.options.space || '10px';
        if (this.options.tablePop) {
          empos = 'transform:rotate(-45deg);left:-5px;top:24px;';
        } else {
          empos = 'transform:rotate(-45deg);left:-5px;top:15px;';
        }
      } else if (offset === 'rightTop') {
        ele.style.right = '-' + (ele.style.width);
        ele.style.top = '5px';
        ele.style.paddingLeft = this.options.space || '10px';
        empos = 'transform:rotate(-45deg);left:-5px;top:10px;';
      } else if (offset === 'rightBottom') {
        ele.style.right = '-' + (ele.style.width);
        ele.style.bottom = '5px';
        ele.style.paddingLeft = this.options.space || '10px';
        empos = 'transform:rotate(-45deg);left:-5px;bottom:20px;';
      } else {
        ele.style.paddingLeft = this.options.left || '0px';
        ele.style.paddingTop = this.options.space || '10px';
        if (this.options.tablePop) {
          ele.style.bottom = -(this.options.data.length * 24 + 20) + 'px';
        }
        empos = 'transform:rotate(45deg);top: -5px;left:10px;';
      }

      if (this.options.text) {
        this.htmlStr = '<div style="padding:8px 12px;position:relative;background-color:#fff;width:100%;height:auto;border:1px solid #83d1ff;line-height:24px;border-radius:3px;box-shadow:0 0 10px 1px #83d1ff;">' +
          this.options.text + '<em style="width: 8px;height: 8px;border-left:1px solid #83d1ff;border-top:1px solid #83d1ff;display: inline-block;background-color: #fff;position: absolute;box-shadow: -1px -1px 3px #83d1ff;'+ empos +'">&nbsp;</em></div>';
      } else {
        this.htmlStr = '<div style="padding:8px 12px;position:relative;background-color:#fff;width:100%;height:auto;border:1px solid #83d1ff;line-height:24px;border-radius:3px;box-shadow:0 0 10px 1px #83d1ff;">' +
          '<em style="width: 8px;height: 8px;border-left:1px solid #83d1ff;border-top:1px solid #83d1ff;display: inline-block;background-color: #fff;position: absolute;box-shadow: -1px -1px 3px #83d1ff;'+ empos +'">&nbsp;</em>' +
          '<dl style="font-size: 12px;margin:0;padding:0;color: #666;line-height: 24px;float:left;width:100%;">';
        this.options.data.map((item: any) => {
          this.htmlStr += '<dt style="float:left;width: 25%;margin:0;padding:0;font-weight: bold;">' + item['key'] + '：</dt>' + '<dd style="width: 74%;float:left;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;margin:0;padding:0;">' + item['value'] + '</dd>';
        });
        this.htmlStr += '</dl><div style="clear: both"></div></div>';
      }

      this.titleBox.innerHTML = this.htmlStr;
      this.el.nativeElement.appendChild(this.titleBox);
    }
    this.titleBox.hidden = false;
  }

  hideTitle() {
    this.titleBox.hidden = true;
  }
}