import { injectable } from 'inversify';
import { IMapService } from './imap.service';
import { Category } from '~/services/categories';

import { Tip } from '~/services/tips';


@injectable()
export class MapService implements IMapService {

  private initializedPromise: Promise<void>;

  constructor () {
      this.initialize();
  }

  private loadMapScripts(): void {
    const scriptTag = document.createElement('script');
    scriptTag.src = '//www.bing.com/api/maps/mapcontrol?callback=OnLoadMaps';
    scriptTag.id = 'scriptBingMaps';
    document.head.appendChild(scriptTag);
  }

  private initialize(): Promise<void> {
    if (!this.initializedPromise) {
        this.initializedPromise = new Promise((resolve) => {
          (window as any).OnLoadMaps = () => {
              resolve();
          };
          this.loadMapScripts();
        });
    }

    return this.initializedPromise;
  }

  public async createMap(mapElement: HTMLElement, coordinates: {lat: number, lng: number}): Promise<any> {
    await this.initialize();

    return new (window as any).Microsoft.Maps.Map(mapElement, {
      credentials: 'ApbCxtQryYLUNrnVHSPNiw6tYYw8rXzKn72PRKsmyImrZROg2S6bxBFvRdSIppNW',
      center: (window as any).Microsoft.Maps.Location(coordinates.lat, coordinates.lng)
    });
  }

  public addPinsFromCategory(map: any, category: Category): void {
    category.tips.forEach(tip => {
      const pin = new (window as any).Microsoft.Maps.Pushpin({latitude: tip.latitude, longitude: tip.longitude}, null);
      map.entities.push(pin);
    });
  }
}