/*deprecated*/
import {
  Directive,
  ElementRef,
  HostListener,
  Input,
  Renderer2,
} from '@angular/core';
import { DescriptiveCardService } from './descriptive-card.service';
import { DescriptiveCardProperties } from '../../interfaces/descriptive-card-properties-interface';
import { DescriptiveCardCSSProperties } from '../../interfaces/descriptive-card-css-properties-interface';

@Directive({
  selector: '[appDescriptiveCard]'
})
export class DescriptiveCardDirective {
  @Input() descriptiveCardProperties: DescriptiveCardProperties;

  screenHeight: number;
  screenWidth: number;

  constructor(
    private el: ElementRef,
    private renderer2: Renderer2,
    private dcs: DescriptiveCardService
  ) {
  }

  @Input() type?: string;


  @HostListener('click', ['$event'])
  onClick() {
    this.setDescCardStyles();
  }

  injectComponent(dcssp: DescriptiveCardCSSProperties) {
    const cmp = this.dcs.appendComponentToBody();
    if (cmp !== null) {
      const instance = cmp.instance;
      console.log("vvvv", this.descriptiveCardProperties);
      instance.descriptiveCardProperties = this.descriptiveCardProperties;
      instance.descriptiveCardCSSProp = dcssp;

      instance.display.subscribe((x: boolean) => {
        if (!x) {
          this.dcs.removeComponentFromBody();
        }
      });

      this.dcs.setDcsp(dcssp);
    }
  }

  setDescCardStyles() {
    if (!this.type || this.type === 'click') {
      const dcssp: DescriptiveCardCSSProperties = {
        positionX:  this.el.nativeElement.getBoundingClientRect().x,
        positionY:   document.documentElement.scrollTop +
        this.el.nativeElement.getBoundingClientRect().top +
        this.el.nativeElement.getBoundingClientRect().height,
        display: true
      };

      this.injectComponent(dcssp);
    }
  }

  @HostListener('mouseover')
  onMouseOver() {
    this.renderer2.setStyle(this.el.nativeElement, 'cursor', 'pointer');
  }
}
