import { Ffilter } from './../../../../../core/interfaces/utils/forms/filters';
import { AfterViewInit, 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, AfterViewInit {

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

  sites: Site[] = SITES;
  @Input() form!: Ffilter;

  mapa?: any;
  zoom = 17;
  position!: google.maps.LatLngLiteral
  markers: any[] = [];
  info_window_content: Site = {
    name: "",
    id: 0,
    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: this.form.lat,
      lng: this.form.lng
    };
    this.createMarkers();
  }

  ngAfterViewInit() {
    console.log(this.map)
  }

  createMarkers() {
    const image = {
      url: "../../../../../../assets/markers/redmarker.png",
      size: new google.maps.Size(36, 36),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(0, 29),
    };
    this.sites.forEach((site: Site) => {
      this.markers.push({
        position: {
          lat: site.address!.latitude,
          lng: site.address!.length
        },
        title: site.name,
        info: {
          ...site
        },
        icon: image
      })
    })
  }

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

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

  mapIsDragged() {
    this.form.lat = this.map.googleMap?.getCenter().lat() || 0
    this.form.lng = this.map.googleMap?.getCenter().lat() || 0
    this.form.zoom = parseInt(this.map.googleMap?.getZoom().toPrecision() || '17') || 17
    console.log(this.form)
  }

}