import {
  Component,
  ChangeDetectorRef,
  AfterViewInit,
  ElementRef,
  Renderer2,
  Input,
  ViewContainerRef,
  ComponentRef,
  Output,
  EventEmitter,
  ViewEncapsulation
} from '@angular/core';
import { Router } from '@angular/router';
import { DescriptiveCardProperties } from '../../interfaces/descriptive-card-properties-interface';
import { DescriptiveCardCSSProperties } from '../../interfaces/descriptive-card-css-properties-interface';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-descriptive-card',
  templateUrl: './descriptive-card.component.html',
  styleUrls: ['./descriptive-card.component.scss'],
  encapsulation: ViewEncapsulation.None,
  exportAs: 'child'
})
export class DescriptiveCardComponent implements AfterViewInit {
  @Input() public descriptiveCardProperties: DescriptiveCardProperties;
  @Input() public descriptiveCardCSSProp: DescriptiveCardCSSProperties;

  @Output()
  display: EventEmitter<boolean> = new EventEmitter<boolean>();
  overlay_background: any;

  constructor(
    private el: ElementRef,
    private router: Router,
    private ref: ChangeDetectorRef,
    private renderer2: Renderer2
  ) {}

  ngAfterViewInit() {
    // console.log(
    //   'ngAfterViewInit DescriptiveCardComponent',
    //   this.descriptiveCardCSSProp,
    //   this.descriptiveCardProperties
    // );

    if (this.descriptiveCardCSSProp) {
      this.renderer2.setStyle(
        this.el.nativeElement,
        'top',
        // (
        this.descriptiveCardCSSProp.positionY +
          // + document.documentElement.scrollTop)
          'px'
      );
      this.renderer2.setStyle(
        this.el.nativeElement,
        'left',
        this.descriptiveCardCSSProp.positionX + 'px'
      );
      this.renderer2.setStyle(this.el.nativeElement, 'position', 'absolute');
      this.renderer2.setStyle(this.el.nativeElement, 'z-index', '1');

      if (this.descriptiveCardProperties) {
        // console.log(this.descriptiveCardProperties);
        this.overlay_background = {
          'background-image':
            'url(' + this.descriptiveCardProperties.imageUrl + ')',
          'background-size': 'cover'
        };
      }
    }
    this.ref.detectChanges();
  }

  public closeCardDesc() {
    this.display.emit(false);
  }
}
