import { MapService } from './../../../../../core/services/map/map.service';
import { QueryService } from './../../../../../core/services/query/query.service';
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';
import { environment } from 'src/environments/environment';

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

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

  sites: Site[] = SITES;
  @Input() form!: Ffilter;
  url = environment.BASE_URL_API;

  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: true,
    disableDoubleClickZoom: false,
    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(private mapService: MapService) { }

  ngOnInit(): void {
    this.position = {
      lat: this.form.lat,
      lng: this.form.lng
    };
    this.getSites();
  }

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

  getSites(){
    this.markers = [];
    this.mapService.getSites(this.form).subscribe(
      (data) => {
        console.log("This is data",data)
        console.log(data);
        this.sites = data;
        this.createMarkers();
        this.loading = false;
      },
      (error) => {
        console.log(error)
      }
    )
  }

  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().lng() || 0
    this.form.zoom = parseInt(this.map.googleMap?.getZoom().toPrecision() || '17') || 17
    this.getSites();
    console.log(this.form)
  }

}