import {
  Component,
  ChangeDetectorRef,
  AfterViewInit,
  ElementRef,
  Renderer2,
  Input,
  ViewContainerRef,
  ComponentRef,
  Output,
  EventEmitter,
  ViewEncapsulation
} from '@angular/core';
import { Router } from '@angular/router';
import { CouponInterface } from '../../interfaces/coupon-properties'
import { Subject } from 'rxjs';

@Component({
  selector: 'app-coupon-popup',
  templateUrl: './coupon-popup.component.html',
  styleUrls: ['./coupon-popup.component.scss'],
  encapsulation: ViewEncapsulation.None,
  exportAs: 'child'
})
export class CouponPopupComponent implements AfterViewInit {
  @Input() public couponProps: CouponInterface;

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

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

  ngAfterViewInit() {

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

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