import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { ModalDirective } from 'angular-bootstrap-md';
import { DescriptiveCardProperties } from '../../interfaces/descriptive-card-properties-interface';
import { DescriptiveCardCSSProperties } from '../../interfaces/descriptive-card-css-properties-interface';

@Component({
  selector: 'app-features-detail',
  templateUrl: './features-detail.component.html',
  styleUrls: ['./features-detail.component.scss']
})
export class FeaturesDetailComponent implements OnInit, AfterViewInit {

  obj = {
    heading: 'Details',
    data: [
      {
        image: '../../../assets/images/Colour@2x.png',
        title: '9G-Tronic',
        text: `Transmission`,
        value: `00.00 KRW`
      },
      {
        image: '../../../assets/images/Upholstery@2x.png',
        title: 'Upholstrey',
        text: `Leather Black`,
        value: `00.00 KRW`
      },
      {
        image: '../../../assets/images/Tire@2x.png',
        title: 'Wheels',
        text: `Light alloy wheels 4-fold`,
        value: `00.00 KRW`
      },
      {
        image: '../../../assets/images/Trim@2x.png',
        title: 'Trim',
        text: `Brown High-Gloss Burr Walnut Wood Trim`,
        value: `00.00 KRW`
      }
    ]
  };

  public descriptiveCardItem: DescriptiveCardProperties;
  public descriptiveCardCSSItem: DescriptiveCardCSSProperties;

  public carItem;
  public popImg;
  @ViewChild('basicModal') basicModal: ModalDirective;
  @ViewChild('modalContainer') modal;

  constructor() {
    this.descriptiveCardItem = {
      imageUrl: '../../../../assets/images/car-interior-design.png',
      title: 'Upholstery',
      subtitle: 'Leather Black',
      amount: 2000,
      currency: 'KRW',
      description: "Driver's seat, electrically adjustable with memory function (included in basic price). Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    }
  }
  top;
  left;

  ngOnInit() {
  }

  ngAfterViewInit() {
    console.log(this.modal.nativeElement);
  }

  openDialog(e?: any) {
    this.modal.nativeElement.style.display = "block";
    const cursorX = e.screenX;
    const cursorY = e.screenY;
    console.log(cursorX, cursorY);

    this.top = cursorY;
    this.left = cursorX;
  }


  closeDialog() {
    this.modal.nativeElement.style.display = "none";
  }


  public updateDsccp(event: DescriptiveCardCSSProperties) {
    console.log(event);
    this.descriptiveCardCSSItem = event;
  }

}
