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';
import { SharedService } from 'src/app/core/services/utils/shared/shared.service';
import { Subscription } from 'rxjs';

@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;
  @Input() form!: Ffilter;

  loading = true;
  sites: Site[] = SITES;
  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',
          },
        ],
      },
    ],
  };
  clickEventSubscription: Subscription;

  constructor(
    private mapService: MapService,
    private sharedService: SharedService
  ) {
    this.clickEventSubscription = this.sharedService
      .getClickEvent()
      .subscribe(() => {
        this.mapIsDragged();
      });
  }

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

  ngAfterViewInit() {}

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