import { Component, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { MapInfoWindow, MapMarker, GoogleMap } from '@angular/google-maps'
import { Site } from 'src/app/core/interfaces/site/site';
import { } from 'googlemaps'
import { SITES } from '../../../../../core/mocks/data';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class MapComponent implements OnInit {

  /*  @ViewChild(GoogleMap, { static: false }) map!: GoogleMap;
   @ViewChild(MapInfoWindow, { static: false }) info!: MapInfoWindow; */
  @ViewChild('mapa', { static: false }) map!: GoogleMap;
  @ViewChild(MapInfoWindow, { static: false }) info_window!: MapInfoWindow;

  @Input() sites: Site[] = SITES;
  @Input() search: string = '';

  mapa?: google.maps.Map;
  zoom = 17;
  center!: google.maps.LatLngLiteral
  markers: any[] = [];
  info_window_content: Site = {
    name: "",
    id: "",
    location: {
      latitude: 1234,
      length: 123
    }
  }; 
  options: google.maps.MapOptions = {
    zoomControl: false,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    maxZoom: 17,
    minZoom: 8,
    noClear: false,
  }

  constructor() { }

  ngOnInit(): void {
    this.center = {
      lat: 7.376362792514798,
      lng: -72.65115193327162
    };
    this.createMarkers();
    /* console.log(this.map)
    this.mapa = new google.maps.Map((this.map as unknown) as Element, this.options) */
  }

  createMarkers() {
    this.sites.forEach((site: Site) => {
      this.markers.push({
        position: {
          lat: site.location.latitude,
          lng: site.location.length
        },
        label: {
          color: 'blue',
          text: site.name,
        },
        title: site.name,
        info: {
          ...site
        },
        icon: {
          url: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/2214px-How_to_use_icon.svg.png"
        }
      })
    })
  }

  openInfoWindow(marker: MapMarker, info_site: any) {
    this.info_window_content = info_site
    this.info_window.open(marker);
  }

  closeInfoWindow(){
    this.info_window.close()
  }

}