import { Component, OnInit, ViewChild } from '@angular/core';
import { Component ,ViewChild} from '@angular/core';
import { GoogleMap, GoogleMapsModule } from '@angular/google-maps';

@Component({
    selector: 'app-google-map',
    templateUrl: './google-map.html',
    styleUrls: ['./google-map.scss'],
    imports: [GoogleMapsModule]
})
export class GoogleMap {

  public openInfo: any
  public markers: any[];
  public zoom: number;

  constructor() {
    this.markers = [];
    this.zoom = 2;
  }

  ngOnInit() {
    this.markers.push({
      position: {
        lat: 35.717,
        lng: 139.731
      },
      label: {
        color: "black",
        text: "Madrid"
      },
      Option:{
        draggable: true,
        animation: google.maps.Animation.DROP,
      }
    });

    this.markers.push({
      position: {
        lat: 48.8615515,
        lng: 2.3112233
      },
      label: {
        color: "black",
        text: "Paris"
      }
    });
  }

  //Street View
  @ViewChild(GoogleMap) map!: GoogleMap;


  ngAfterViewInit(){
    const streetView = this.map.getStreetView();

    streetView.setOptions({
        position: { lat: 38.9938386, lng: -77.2515373 },
        pov: { heading: 70, pitch: -10 },
    });

    streetView.setVisible(true);
    const bounds = this.getBounds(this.markers);
  }

  getBounds(markers: any[]){
   let north;
   let south;
   let east;
   let west;

  for (const marker of markers){
    // set the coordinates to marker's lat and lng on the first run.
    // if the coordinates exist, get max or min depends on the coordinates.
    north = north !== undefined ? Math.max(north, marker.position.lat) : marker.position.lat;
    south = south !== undefined ? Math.min(south, marker.position.lat) : marker.position.lat;
    east = east !== undefined ? Math.max(east, marker.position.lng) : marker.position.lng;
    west = west !== undefined ? Math.min(west, marker.position.lng) : marker.position.lng;
  };

   const bounds = { north, south, east, west };

   return bounds;
  }

}