import { Component, OnInit, Output, EventEmitter, ViewChild, Input, OnChanges, SimpleChanges, SimpleChange} from '@angular/core';
import { FinancingOptionsProperties } from '../../interfaces/financing-options-properties-interface';
import {Router} from '@angular/router'

@Component({
  selector: 'app-car-summary-header',
  templateUrl: './car-summary-header.component.html',
  styleUrls: ['./car-summary-header.component.scss']
})
export class CarSummaryHeaderComponent implements OnInit {

  @ViewChild('basicModal') modal;
  @ViewChild('mailModal') mailModal;
  @Output() public testDrive: EventEmitter<any> = new EventEmitter();
  @Output() public editInfo: EventEmitter<any> = new EventEmitter();
  @Output() public sendMail: EventEmitter<any> = new EventEmitter();
  @Output() public addToWishlist: EventEmitter<any> = new EventEmitter();
  @Output() public financeOptions: EventEmitter<any> = new EventEmitter();
  @Output() public submitFinanceOptions: EventEmitter<any> = new EventEmitter();
  @Input() financingOptionsItems: FinancingOptionsProperties[];

  @ViewChild('financeOptions') financeOptions1;
  @ViewChild('otherOptions') otherOptions1;

  @Input() vehicleData;
  @Input() vehicleLabels;

  public vehicleHeaderData;
  public vehicleLabelsData;


  constructor(private router:Router) { }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.vehicleLabels) {
      this.vehicleLabelsData = changes.vehicleLabels.currentValue;
    }
    if (changes.vehicleData) {
      this.vehicleHeaderData = changes.vehicleData.currentValue;
    }
  }

  ngOnInit() {
  }

  drive() {
    this.testDrive.emit('');
  }

  editInformation() {
    this.editInfo.emit('');
  }

  mailToSelf() {
    this.mailModal.show();
  }

  wishList() {
    this.addToWishlist.emit('');
  }

  financingOptions(e?: any) {
    this.modal.show();
  }

  submitFinanceOption() {
    this.submitFinanceOptions.emit('');
    
  }

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

  financialOptionsSelected(val) {
    if (val === 'Installments') {
      this.financeOptions1.nativeElement.style.display = 'block';
      this.otherOptions1.nativeElement.style.display = 'none';
    } else {
      this.financeOptions1.nativeElement.style.display = 'none';
      this.otherOptions1.nativeElement.style.display = 'block';
    }
  }

}
