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

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

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

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

  ngOnInit() {
    const bangalore = { lat: 12.97, lng: 77.59 };
    this.markers1.push({
      position: {
        lat: 12.97,
        lng: 77.59
      },
      label: {
        color: "red",
        text: "Arial"
      },
      Option: {
        draggable: true,
        animation: google.maps.Animation.DROP,
        zoomControl: false,
        mapTypeControl: false,
        streetViewControl: false,
        fullscreenControl: false
      }

    })

    const map = new google.maps.Map(
      document.getElementById("map") as HTMLElement,
      {
        zoom: 12,
        center: bangalore,
      }
    );

    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);
    // const this.map.googleMap.fitBounds(bounds);
  }

  marker1 = { position: { lat: 38.9987208, lng: -77.2538699 } };
  marker2 = { position: { lat: 39.7, lng: -76.0 } };
  marker3 = { position: { lat: 37.9, lng: -76.8 } };

  markers5 = [this.marker1, this.marker2, this.marker3];


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

}