import { Component } from '@angular/core';
import { MouseEvent } from '@agm/core';
import { Vehicle } from './vehicle-list/vehicle';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  zoom: number = 8;

  // initial center position for the map
  lat: number = 51.673858;
  lng: number = 7.815982;

  windowOpen: number;
  public selectedVehicle: Vehicle;

  markers: marker[] = [
    {
      lat: 51.673858,
      lng: 7.815982,
      label: 'A',
      draggable: true
    },
    {
      lat: 51.373858,
      lng: 7.215982,
      label: 'B',
      draggable: false
    },
    {
      lat: 51.723858,
      lng: 7.895982,
      label: 'C',
      draggable: true
    }
  ]

  public vehicleSelected(vehicle: any): void {
    this.selectedVehicle = vehicle;
    if (this.selectedVehicle.plateNumber % 3 === 0) {
      this.windowOpen = 2;
    } else if (this.selectedVehicle.plateNumber % 2 === 0) {
      this.windowOpen = 1
    } else {
      this.windowOpen = 0;
    }
  }

  public clickedMarker(label, i) {
  }

  public isWindowOpens(i) {
    return this.windowOpen === i;
  }

}
// just an interface for type safety.
interface marker {
  lat: number;
  lng: number;
  label?: string;
  draggable: boolean;

}