import uuid from 'uuid';
import Location from './location';
import Point from './point';
import polyFetch from 'whatwg-fetch';
import { Promise as ES6Promise } from 'es6-promise-polyfill';
import MapBox from 'mapbox-gl';
import axios from 'axios';
import _ from 'lodash';
import PitchToggle from './pitch_toggle';

class Map {

  constructor(platform, config) {
    this.id = uuid.v4();
    this.platform = platform;
    this.config = config;
    this.div = 'map';
    this.tileLayers = [];
    this.locationTracking = true;
    this.initialized = false;
    this.circles = {};
    this.firstCircleLayer = null;
    this.floorplans = {};

    this.platform.window.axios = axios;
    this.platform.window.Promise = ES6Promise;
    this.initMap();
  }

  remove() {
    this.map.remove();
    this.platform.onMapRemoved(this);
  }

  setLocationTracking(enabled) {
    this.locationTracking = enabled;
  }

  addFloorPlan(floorPlan) {
    if (this.initialized) {
      // const id = floorPlan.id;
      const id = 'floorplan';
      const sourceId = 'floorplan-source';
      const source = this.map.getSource(sourceId);
      if (source) {
        this.map.removeSource(sourceId);
        this.map.removeLayer(id);
      }

      const c = floorPlan.corners;

      const options = {
        type: 'image',
        url: floorPlan.imageUrl,
        coordinates: [c[3], c[2], c[0], c[1]]
      };

      this.map.addSource(sourceId, options);

      this.map.addLayer({
        id: id,
        source: sourceId,
        type: 'raster'
      });

      if (this.firstCircleLayer) {
        console.log('moving layer behind', this.firstCircleLayer);
        this.map.moveLayer(id, this.firstCircleLayer);
      }
    }
  }

  getCenter() {
    return Location.fromLatLng(this.map.getCenter());
  }

  removeLastTileLayer() {
    const lastLayer = this.tileLayers[this.tileLayers.length - 1];
    this.map.removeLayer(lastLayer);
    this.tileLayers.pop();
  }

  setCurrentLocationMarker(location, title) {
    if (this.currentLocationMarker === undefined) {
      this.currentLocationMarker = this.addMarker(location, {});
      window.koko = this.currentLocationMarker;
      this.map.panTo(location.lngLat);
    } else {
      this.currentLocationMarker.setLngLat(location.lngLat);
    }
  }

  geoJsonCircle(center, radiusInKm, points) {
    if(!points) points = 64;

    var coords = {
        latitude: center[1],
        longitude: center[0]
    };

    var km = radiusInKm;

    var ret = [];
    var distanceX = km/(111.320*Math.cos(coords.latitude*Math.PI/180));
    var distanceY = km/110.574;

    var theta, x, y;
    for(var i=0; i<points; i++) {
        theta = (i/points)*(2*Math.PI);
        x = distanceX*Math.cos(theta);
        y = distanceY*Math.sin(theta);

        ret.push([coords.longitude+x, coords.latitude+y]);
    }
    ret.push(ret[0]);

    return {
      "type": "geojson",
      "data": {
        "type": "FeatureCollection",
        "features": [{
          "type": "Feature",
          "properties": {
            "level": 0,
            "height": 0,
            "base_height": 0,
            "color": "green",
            "name": "Geofence"
          },
          "geometry": {
              "type": "Polygon",
              "coordinates": [ret]
          }
        }]
      }
    };
  }

  addCircle(id, location, radius, color, fillColor, opacity) {
    if (this.initialized) {
      console.log('adding circle', id);
      const sourceId = 'source-' + id;
      const layerId = 'layer-' + id;

      if (!this.firstCircleLayer) {
        this.firstCircleLayer = layerId;
      }

      if (this.map.getSource(sourceId)) {
        this.map.removeSource(sourceId);
        this.map.removeLayer(layerId);
      }

      const circle = this.geoJsonCircle(location.lngLat, radius / 1000);

      const layer = {
        "id": layerId,
        // "type": "fill-extrusion",
        "type": "fill",
        "source": sourceId,
        "layout": {},
        "paint": {
          "fill-color": fillColor,
          "fill-opacity": opacity,
          // 'fill-extrusion-color': {
          //     // Get the fill-extrusion-color from the source 'color' property.
          //     'property': 'color',
          //     'type': 'identity'
          // },
          // 'fill-extrusion-height': {
          //     // Get fill-extrusion-height from the source 'height' property.
          //     'property': 'height',
          //     'type': 'identity'
          // },
          // 'fill-extrusion-base': {
          //     // Get fill-extrusion-base from the source 'base_height' property.
          //     'property': 'base_height',
          //     'type': 'identity'
          // },
          // // Make extrusions slightly opaque for see through indoor walls.
          // 'fill-extrusion-opacity': 0.5
        }
      };

      this.map.addSource(sourceId, circle);
      this.map.addLayer(layer);
    } else {
      console.log('skipping circle', id);
    }
  }

  addMarker(location, options) {
    const defaults = {
      iconSize: [78, 78],
      iconAnchor: [-36, -36],
      iconUrl: 'images/icon_bludot2x.png'
    };

    const settings = _.merge(defaults, options);

    const el = document.createElement('div');
    el.className = 'marker';
    el.style.width = settings.iconSize[0] + 'px';
    el.style.height = settings.iconSize[1] + 'px';
    el.style.backgroundImage = `url(${settings.iconUrl})`;
    el.style.backgroundSize = '100% 100%';

    el.addEventListener('click', function() {
      window.alert(marker.properties.message);
    });

    // add marker to map

    const markerOptions = {
      offset: [ settings.iconAnchor[0], settings.iconAnchor[1] ]
    };

    const marker = new MapBox.Marker(el, markerOptions)
        .setLngLat(location.lngLat)
        .addTo(this.map);

    return marker;
  }

  setView(location, zoom) {
    this.map.setCenter(location.lngLat);
    if (zoom) {
      this.map.setZoom(zoom);
    }
  }

  viewReset() {
    this.platform.onMapViewReset(this);
  }

  onClick(event) {
    console.log('click event', event);
    // const location = Location.fromLatLng(event.lngLat);
    // this.platform.onMapClick(this, location);
  }

  onLoad() {
    console.log('onLoad', this);
    Proximiio.controller.map.initialized = true;
    Proximiio.controller.map.platform.onMapReady(true);
  }

  get showZoomControls() {
    return this.config.showZoomControls || true;
  }

  get drawEnabled() {
    return this.config.enableDraw || false;
  }

  get draggingEnabled() {
    return this.config.dragging || true;
  }

  log(message) {
    console.log(message);
  }

  initMap() {
    const _this = this;
    this.map = new MapBox.Map({
      container: 'map',
      style: 'https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-styles/master/styles/bright-v9-cdn.json',
      token: 'no-token',
      maxZoom: 24
    });

    this.map.addControl(new MapBox.NavigationControl());
    this.map.on('click', (evt) => {
      _this.onClick(evt);
    });
    this.map.on('load', this.onLoad);
    this.map.addControl(new PitchToggle({minpitchzoom: 11}));
  }

}

export default Map;