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;
  position!: google.maps.LatLngLiteral
  markers: any[] = [];
  info_window_content: Site = {
    name: "",
    id: "",
    address: {
      latitude: 1234,
      length: 123
    }
  };
  options: google.maps.MapOptions = {
    zoomControl: true,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    maxZoom: 17,
    minZoom: 8,
    noClear: false,
    styles: [
      {
        "featureType": "poi",
        "elementType": "labels.text",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.business",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "road",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "transit",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }
    ],
  }

  constructor() { }

  ngOnInit(): void {
    this.position = {
      lat: 7.376362792514798,
      lng: -72.65115193327162
    };
    this.createMarkers();
  }

  createMarkers() {
    const svgMarker = {
      path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
      fillColor: "blue",
      fillOpacity: 0.6,
      strokeWeight: 0,
      rotation: 0,
      scale: 2,
      anchor: new google.maps.Point(15, 30),
    };
    this.sites.forEach((site: Site) => {
      this.markers.push({
        position: {
          lat: site.address!.latitude,
          lng: site.address!.length
        },
        label: {
          color: '',
          text: site.name,
        },
        title: site.name,
        info: {
          ...site
        },
        icon: svgMarker
        /* 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()
  }

}