import { Component, OnInit, ViewChild, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
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-car-details',
    templateUrl: './car-details.component.html',
    styleUrls: ['./car-details.component.scss'],
})

export class CarDetailsComponent implements OnInit {
    public carItem;
    public popImg;
    public descriptiveCardItem: DescriptiveCardProperties;
    public descriptiveCardCSSItem: DescriptiveCardCSSProperties;
    
    @ViewChild('basicModal') basicModal: ModalDirective;


    constructor(
        private router: Router,
        private ref: ChangeDetectorRef) {
            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."
            }
      
    }

    openDialog(img) {
        //this.popImg = 'https://cpb-ap-se2.wpmucdn.com/global2.vic.edu.au/dist/b/17690/files/2014/03/url-2-2k4i0gj.jpeg';
        this.popImg = img;
        this.basicModal.show();
    }
    closeDialog() {
        this.basicModal.hide();
    }

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

    public ngOnInit(): void {
        this.carItem = JSON.parse(localStorage.getItem("carObj"));
        console.log("caaaa", this.carItem)
    }

}
