/*deprecated*/
import {
  Directive,
  ElementRef,
  HostListener,
  Input,
  Renderer2,
  OnDestroy,
  Output,
  EventEmitter
} from '@angular/core';
import { ViewportScroller } from '@angular/common';
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 vpS: ViewportScroller,
    private dcs: DescriptiveCardService
  ) {
    this.getScreenSize();
  }

  @Input() type?: string;

  @HostListener('window:resize', ['$event'])
  getScreenSize(event?) {
    this.screenHeight = window.innerHeight;
    this.screenWidth = window.innerWidth;
  }

  @HostListener('click', ['$event']) onClick(event: any) {
    if (!this.type || this.type === 'click') {
      console.log('Y', this.el.nativeElement.getBoundingClientRect().y);
      console.log('top', this.el.nativeElement.getBoundingClientRect().top);
      console.log('scrollTop', document.documentElement.scrollTop);

      const X: number = this.el.nativeElement.getBoundingClientRect().x;
      const Y: number =
        document.documentElement.scrollTop +
        this.el.nativeElement.getBoundingClientRect().top +
        this.el.nativeElement.getBoundingClientRect().height;

      const dcssp: DescriptiveCardCSSProperties = {
        positionX: X,
        positionY: Y,
        display: true
      };

      const cmp = this.dcs.appendComponentToBody();
      if (cmp !== null) {
        const instance = cmp.instance;
        instance.descriptiveCardProperties = this.descriptiveCardProperties;
        instance.descriptiveCardCSSProp = dcssp;

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

        this.dcs.setDcsp(dcssp);
      }
    }
  }

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