import { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core';
import L from 'leaflet';
import { Leaflet } from './map-services/leaflet';
const INIT_DELAY = 500;
const DEFAULT_LOCATION = {
  lat: 38.993,
  lon: -76.84,
  zoom: 10,
};
export class Map {
  constructor() {
    this.minZoom = 0;
    this.maxZoom = 24;
    this.zoom = DEFAULT_LOCATION.zoom;
    this.latitude = DEFAULT_LOCATION.lat;
    this.longitude = DEFAULT_LOCATION.lon;
    this.fitWorld = false;
    this.showNavigation = true;
    this.navigationLocation = 'topright';
    this.resize = false;
    this.drawCircleOption = false;
    this.drawMarkerOption = false;
    this.markerIconUrl = 'marker-icon.png';
    this.markerIconShadowUrl = 'marker-shadow.png';
  }
  async componentWillLoad() {
    this.map = new Leaflet({
      circle: this.drawCircleOption ? {} : false,
      rectangle: {},
      marker: this.drawMarkerOption
        ? {
          icon: L.icon({
            iconUrl: this.markerIconUrl,
            shadowUrl: this.markerIconShadowUrl,
          }),
        }
        : false,
    });
  }
  async componentDidLoad() {
    await setTimeout(() => this.initializeMap(), INIT_DELAY);
  }
  showNavigationChanged(showNavigation) {
    showNavigation ? this.map.addNavigationControl(this.navigationLocation) : this.map.removeNavigationControl();
  }
  zoomChanged(zoom) {
    this.map.setZoom(zoom);
  }
  /**
   * Resize map when hidden and displayed.
   * Mapbox mentions issue https://docs.mapbox.com/help/troubleshooting/blank-tiles/
   */
  resizeMap(resize) {
    if (resize) {
      this.map.refreshSize();
    }
  }
  initializeMap() {
    this.map.initializeMap(this.mapEl.querySelector('.map-container'), {
      latitude: this.latitude,
      longitude: this.longitude,
      zoom: this.zoom,
      minZoom: this.minZoom,
      maxZoom: this.maxZoom,
    });
    this.showNavigationChanged(this.showNavigation);
    this.mapInit.emit(this.map);
    this.map.on('draw', layer => {
      this.draw.emit(layer);
    });
    this.map.on('clear', () => this.clearDraw.emit());
    window.addEventListener('drawerToggled', () => this.map.refreshSize());
  }
  render() {
    return (h(Host, { class: "d-flex", style: {
        width: this.width && `${this.width}px`,
        height: this.height && `${this.height}px`,
        display: 'flex',
      } },
      h("div", { class: "map-container" })));
  }
  static get is() { return "gd-map"; }
  static get originalStyleUrls() { return {
    "$": ["gd-map.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["gd-map.css"]
  }; }
  static get properties() { return {
    "minZoom": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "min-zoom",
      "reflect": false,
      "defaultValue": "0"
    },
    "maxZoom": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "max-zoom",
      "reflect": false,
      "defaultValue": "24"
    },
    "zoom": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "zoom",
      "reflect": false,
      "defaultValue": "DEFAULT_LOCATION.zoom"
    },
    "latitude": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "latitude",
      "reflect": false,
      "defaultValue": "DEFAULT_LOCATION.lat"
    },
    "longitude": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "longitude",
      "reflect": false,
      "defaultValue": "DEFAULT_LOCATION.lon"
    },
    "fitWorld": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "fit-world",
      "reflect": false,
      "defaultValue": "false"
    },
    "width": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "width",
      "reflect": false
    },
    "height": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "height",
      "reflect": false
    },
    "showNavigation": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "show-navigation",
      "reflect": false,
      "defaultValue": "true"
    },
    "navigationLocation": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "navigation-location",
      "reflect": false,
      "defaultValue": "'topright'"
    },
    "resize": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "resize",
      "reflect": false,
      "defaultValue": "false"
    },
    "drawCircleOption": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "draw-circle-option",
      "reflect": false,
      "defaultValue": "false"
    },
    "drawMarkerOption": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "draw-marker-option",
      "reflect": false,
      "defaultValue": "false"
    },
    "markerIconUrl": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "marker-icon-url",
      "reflect": false,
      "defaultValue": "'marker-icon.png'"
    },
    "markerIconShadowUrl": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "marker-icon-shadow-url",
      "reflect": false,
      "defaultValue": "'marker-shadow.png'"
    }
  }; }
  static get events() { return [{
      "method": "mapInit",
      "name": "mapInit",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "draw",
      "name": "draw",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "clearDraw",
      "name": "clearDraw",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "mapEl"; }
  static get watchers() { return [{
      "propName": "showNavigation",
      "methodName": "showNavigationChanged"
    }, {
      "propName": "zoom",
      "methodName": "zoomChanged"
    }, {
      "propName": "resize",
      "methodName": "resizeMap"
    }]; }
}
