import { Component, OnInit, Output, EventEmitter, ViewChild, Input, SimpleChanges, SimpleChange} from '@angular/core';
import { Router } from '@angular/router';

import { FinancingOptionsProperties } from '../../interfaces/financing-options-properties-interface';
import { LocalStorageService } from '../../../shared/services/localStorage.service';

@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;
  @ViewChild('quotationModal') quotationModal;
  @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();
  @Output() public submitCustomerForm: EventEmitter<any> = new EventEmitter();
  @Output() public viewCustomerLeads: EventEmitter<any> = new EventEmitter();  
  @Output() public linkCustomerLeads: EventEmitter<any> = new EventEmitter();
  @Output() public createContract: EventEmitter<any> = new EventEmitter();
  
  @ViewChild('financeOptions') financeOptions1;
  @ViewChild('otherOptions') otherOptions1;
  @ViewChild('customerTable') customerTableContainer;
  @ViewChild('leadTable') leadTableContainer;
  @ViewChild('createCustomer') createCustomer;
  
  @Input() financingOptionsItems: FinancingOptionsProperties[];
  @Input() displayType: string = 'vehicle';
  @Input() vehicleData;
  @Input() customerData;
  @Input() leadsData;
  @Input() vehicleLabels;
  @Input() customerDetails;
  @Input() customerDetailData;
  @Input() quoteData;
  @Input() contractData;
  @Input() disableEdit: Boolean = false;

  public vehicleHeaderData;
  public vehicleLabelsData;
  public vehicleCustomerData;
  public customerLeadData;
  public pageType;
  public leadLabels;
  public customerLabels;
  public setCustomer;
  
  customerModel: any = {};
  showSpinner: Boolean = false;
  showSpinnerLeadTable: Boolean = false;
  showCustomerForm: Boolean = false;
  showLeadForm: Boolean = false;
  
  constructor(
    private router: Router,
    private localStorageService: LocalStorageService
  ) {
  }
  
  ngOnInit() {
    this.leadTableContainer.nativeElement.style.display = 'none';
    this.getLabels();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.vehicleLabels) {
      this.vehicleLabelsData = changes.vehicleLabels.currentValue;
    }
    if (changes.vehicleData) {
      this.vehicleHeaderData = changes.vehicleData.currentValue;
    }
    if (changes.customerData) {
      this.showSpinner = false;
      this.vehicleCustomerData = changes.customerData.currentValue;
    }
    if (changes.leadsData) {
      this.showSpinnerLeadTable = false;
      this.leadTableContainer.nativeElement.style.display = 'block';
      this.customerLeadData = changes.leadsData.currentValue;
    }
    if (changes.customerDetailData) {
      this.customerDetailData = changes.customerDetailData.currentValue;
    }
    if (changes.displayType) {
      this.pageType = changes.displayType.currentValue;
    }
    if (changes.disableEdit) {
      this.disableEdit = changes.disableEdit.currentValue;
    }
    if (changes.quoteData) {
      this.quoteData = changes.quoteData.currentValue;
    }
    if (changes.contractData) {
      this.contractData = changes.contractData.currentValue;
    }
  }
  
  getLabels() {
    let data = this.localStorageService.getLocalStorageData("appLabels");
    this.leadLabels = data.leadCreation;
    this.customerLabels = data.customerForm;
  }

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

  sendEmailEmit(){
    this.sendMail.emit(this.mailModal);
  }

  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';
    }
  }

  createQuotationMethod() {
    this.customerTableContainer.nativeElement.style.display = 'block';
    this.leadTableContainer.nativeElement.style.display = 'none';
    this.vehicleCustomerData = null;
    this.customerModel.firstName = ' ';
    this.quotationModal.show();
  }

  public onCustomerFormSubmit() {
    this.showSpinner = true;
    this.submitCustomerForm.emit(this.customerModel);
  }

  viewLeads(obj) {
    this.setCustomer = obj;
    this.showSpinnerLeadTable = true;
    this.customerTableContainer.nativeElement.style.display = 'none';
    this.viewCustomerLeads.emit(obj);
  }

  goBackToCustomer() {
    this.customerTableContainer.nativeElement.style.display = 'block';
    this.leadTableContainer.nativeElement.style.display = 'none';
  }

  goBackToCustomerSearch() {
    this.customerTableContainer.nativeElement.style.display = 'block';
    this.showCustomerForm= false;
  }

  navigateToCustomerCreate() {
    //this.router.navigate(['./customersearch/create']);
    this.customerTableContainer.nativeElement.style.display = 'none';
    this.showCustomerForm= true;
  }

  navigateToCreateLead() {
    // this.router.navigate(['./stocks/lead/create']);
    this.leadTableContainer.nativeElement.style.display = 'none';
    this.showLeadForm= true;
  }

  initiateCreateContract() {
    this.createContract.emit('');
  }

  linkLead(obj) {
    this.linkCustomerLeads.emit(obj);
  }

  optionsMenu() {
    alert("options");
  }

  saveChanges() {
    alert("save changes");
  }

  ignoreCustomerForm() {
    this.showCustomerForm = false;
    this.customerTableContainer.nativeElement.style.display = 'block';
  }

  ignoreLeadForm() {
    this.showLeadForm = false;
    this.leadTableContainer.nativeElement.style.display = 'block';
  }

  redirectToLeadsView(){
    this.showLeadForm = false;
    this.viewLeads(this.setCustomer);
  }

}
