import { h, Host } from '@stencil/core';
import ConvertUnit, { round } from '../gd-map/map-services/conversions';
const DEFAULT_RANGE = '-180,-90,180,90';
export class SpatialPicker {
  constructor() {
    this.label = 'Select spatial area';
    this.showMapIcon = true;
    this.value = '';
    this.precision = 3;
    this.minZoom = 0;
    this.maxZoom = 24;
    this.zoom = 2;
    this.latitude = 0;
    this.longitude = 0;
    this.fitWorld = false;
    this.autocomplete = false;
    /**
     * use to enable circle draw
     */
    this.circleDraw = true;
    /**
     * use to enable marker draw
     */
    this.markerDraw = true;
    /**
     * use to disable spatial picker
     */
    this.disabled = false;
    /**
     * use spatial picker as an button w/icon instead of default input.
     */
    this.useAsIcon = true;
    /**
     * if useAsIcon optn set, choose bootstrap button style
     */
    this.variant = 'light';
    /**
     * if useAsIcon optn set, you can added styling class names such as boostrap utility classes to adjust button
     */
    this.classes = '';
    /**
     * marker icon for map
     */
    this.markerIconUrl = 'marker-icon.png';
    /**
     * marker shadow icon for map
     */
    this.markerIconShadowUrl = 'marker-shadow.png';
    /**
     * Internal State for all selected fields
     */
    this.selectedArea = DEFAULT_RANGE;
    this.selectedCircleLat = null;
    this.selectedCircleLng = null;
    this.selectedCircleRad = null;
    this.selectedCircleRadUnit = 'km';
    this.selectedMarkerLat = null;
    this.selectedMarkerLng = null;
    this.displayMap = false;
    this.invalid = false;
    /**
     * Error Message for invalid bounding box
     */
    this.errorMessage = null;
    this.selectedLayerType = 'rectangle';
    this.isNumber = function isNumber(value) {
      return typeof value === 'number' && isFinite(value);
    };
    /**
     * https://stackoverflow.com/questions/17369098/simplest-way-of-getting-the-number-of-decimals-in-a-number-in-javascript
     * @param value
     * @returns
     */
    this.countDecimals = function (value) {
      if (Math.floor(value) === value)
        return 0;
      return value.toString().split('.')[1].length || 0;
    };
    this.isLatitude = function (coord) {
      coord = Number(coord);
      return coord >= -90 && coord <= 90;
    };
    this.isLongitude = function (coord) {
      coord = Number(coord);
      return coord >= -180 && coord <= 180;
    };
    this.increasingCoordinates = function (box) {
      // make sure it's an array of numbers...
      box = box.map(Number);
      // run the check
      return box[0] >= -180 && box[0] <= 180 && box[2] >= -180 && box[2] <= 180 && box[0] <= box[2] && box[1] <= box[3];
    };
  }
  mapDrawSelectedHandler(event) {
    this.selectedLayerType = event.detail.layerType;
  }
  closeSpatialPicker(event) {
    if (this.useAsIcon) {
      if (!event.target.closest('.spatial-icon-btn')) {
        if (!this.el.querySelector('.map-wrapper').classList.contains('hide')) {
          this.el.querySelector('.map-wrapper').classList.add('hide');
        }
      }
    }
  }
  componentDidLoad() {
    this.inputEl = this.el.querySelector('gd-input');
  }
  handleMapInit(map) {
    this.map = map;
    this.map.addDrawControl();
    this.spatialPickerInit.emit(this.map);
    if (this.value) {
      if (this.isCircle(this.value)) {
        // if value is circle, set selected layer to circle
        this.selectedLayerType = 'circle';
        this.onValueChanged(this.value);
      }
      else if (this.isPoint(this.value)) {
        // if value is point, set selected layer to point
        this.selectedLayerType = 'marker';
        this.onValueChanged(this.value);
      }
      else if (typeof this.value === 'string') {
        // if value is point, set selected layer to bbox
        this.selectedLayerType = 'rectangle';
        this.onValueChanged(this.value);
      }
    }
  }
  isCircle(value) {
    return value.hasOwnProperty('lat') && value.hasOwnProperty('lng') && value.hasOwnProperty('radius') ? true : false;
  }
  isPoint(value) {
    return value.hasOwnProperty('lat') && value.hasOwnProperty('lng') && !value.hasOwnProperty('radius') ? true : false;
  }
  /**
   * function is only called when a draw is triggered from the map
   * @param bounds
   */
  handleDraw(bounds) {
    if (bounds.layerType === 'rectangle') {
      let northeast = bounds._northEast;
      let southwest = bounds._southWest;
      let box = this.map.normalizeBox([southwest.lng, southwest.lat, northeast.lng, northeast.lat]); // normalize bounding box
      let formattedValue = this.formatValueToPrecision(box.join(','), this.precision);
      this.errorMessage = this.validateBbox(formattedValue);
      this.handleSpatialAreaChanged(formattedValue); // set  all bounding box state that has changed
    }
    else if (bounds.layerType === 'circle') {
      let points = { lat: round(bounds.lat, this.precision), lng: round(bounds.lng, this.precision) };
      this.errorMessage = this.validateCircle(Object.assign(Object.assign({}, points), { radius: {
          value: round(bounds.radius, this.precision),
          unit: this.selectedCircleRadUnit,
        } }));
      // set all circle state but convert radius from metres to selected unit. Leaflet radius is always in metres
      this.handleCircleAreaChanged(Object.assign(Object.assign({}, points), { radius: { unit: this.selectedCircleRadUnit, value: ConvertUnit(bounds.radius, 'm', this.selectedCircleRadUnit) } }));
    }
    else if (bounds.layerType === 'marker') {
      let points = { lat: round(bounds.lat, this.precision), lng: round(bounds.lng, this.precision) };
      this.errorMessage = this.validatePoint(points);
      // set all marker state
      this.handleMarkerAreaChanged(points);
    }
  }
  onValueChanged(value, formatPrecision = false) {
    var _a, _b;
    try {
      if (this.selectedLayerType === 'rectangle') {
        if (!value && this.selectedArea === DEFAULT_RANGE)
          return;
        this.errorMessage = this.validateBbox(value);
        let formattedValue = formatPrecision ? this.formatValueToPrecision(value, this.precision) : value;
        this.drawSpatialArea(formattedValue);
        this.handleSpatialAreaChanged(formattedValue);
      }
      else if (this.selectedLayerType === 'circle' && this.isCircle(value)) {
        const unit = value.radius.unit;
        const radius = value.radius.value;
        const lat = value.lat;
        const lng = value.lng;
        const circle = Object.assign({}, value);
        this.errorMessage = this.validateCircle(circle);
        if ((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.invalid)
          return;
        this.drawSpatialArea({
          lat: lat,
          lng: lng,
          radius: ConvertUnit(ConvertUnit(radius, this.selectedCircleRadUnit, unit), unit, 'm'),
        });
        this.handleCircleAreaChanged({
          lat: +lat,
          lng: +lng,
          // on handle circle state radius can reflect the changed radius unit selected
          radius: {
            unit: unit,
            value: ConvertUnit(radius, this.selectedCircleRadUnit, unit),
          },
        });
      }
      else if (this.selectedLayerType === 'marker' && this.isPoint(value)) {
        // onValueChange both lat and lng must have value to draw so using current selected value when one of the value is changed.
        const marker = {
          lat: +value.lat,
          lng: +value.lng,
        };
        this.errorMessage = this.validatePoint(marker);
        if ((_b = this.errorMessage) === null || _b === void 0 ? void 0 : _b.invalid)
          return;
        this.drawSpatialArea(marker);
        this.handleMarkerAreaChanged(marker);
      }
    }
    catch (error) {
      console.error('Failed to change value onChange ', error);
    }
  }
  handleSpatialAreaChanged(area) {
    this.selectedArea = area;
    this.valueChanged.emit(area);
  }
  handleCircleAreaChanged(circle) {
    this.selectedCircleLat = circle.lat;
    this.selectedCircleLng = circle.lng;
    this.selectedCircleRad = circle.radius.value;
    this.selectedCircleRadUnit = circle.radius.unit;
    this.valueChanged.emit(circle);
  }
  handleMarkerAreaChanged(marker) {
    this.selectedMarkerLat = marker.lat;
    this.selectedMarkerLng = marker.lng;
    this.valueChanged.emit(marker);
  }
  formatValueToPrecision(value, precision) {
    return (value &&
      value
        .split(',')
        .map(number => +parseFloat(number).toFixed(precision))
        .join(','));
  }
  drawSpatialArea(area) {
    if (!this.map || !area)
      return;
    if (this.selectedLayerType === 'rectangle') {
      let bounds = area.split(',').map(coord => +coord);
      // need 4 coordinates for a boundary
      if (bounds.length < 4)
        return;
      if (bounds[0] > bounds[2])
        bounds[2] += 360;
      this.map.drawRectangle([
        [bounds[3], bounds[2]],
        [bounds[1], bounds[0]],
      ]);
    }
    else if (this.selectedLayerType === 'circle') {
      this.map.drawCircle(area);
    }
    else if (this.selectedLayerType === 'marker') {
      this.map.drawMarker(area);
    }
  }
  showMapDisplay() {
    if (this.disabled)
      return;
    const mapContainer = this.el.querySelector('.map-wrapper');
    if (this.useAsIcon && mapContainer.classList.contains('hide')) {
      this.el.querySelector('.map-wrapper').classList.remove('hide');
      this.displayMap = true;
    }
    else {
      this.el.querySelector('.map-wrapper').classList.add('hide');
    }
  }
  showMap() {
    setTimeout(() => {
      this.map.refreshSize();
    }, 10);
  }
  resetRange() {
    this.clearSpatialInput.emit();
    this.selectedLayerType = 'rectangle';
    this.selectedCircleLat = null;
    this.selectedCircleLng = null;
    this.selectedArea = DEFAULT_RANGE;
    this.selectedCircleRad = null;
    this.selectedMarkerLat = null;
    this.selectedMarkerLng = null;
    this.validateBbox(DEFAULT_RANGE);
    this.valueChanged.emit(DEFAULT_RANGE);
  }
  validateBbox(value) {
    const errorMessages = {
      empty: 'Please enter a bounding box.',
      precision: 'Point coordinates have a maximum degree of precision of 3.',
      coord: "Bounding box contains an invalid number.'",
      range: 'Bounding box must be within -180, -90, 180, 90.',
      box: 'Bounding box must be a rectangle.',
      radiusSupported: 'Point+Radius is NOT supported by this data collection.  Please use a bounding box as your spatial extent or choose a different collection.',
    };
    const rectangle = value === null || value === void 0 ? void 0 : value.split(',');
    /**
     * @bbox bounding box
     * [south Latitude, north Latitude, west Longitude, east Longitude]
     */
    const bbox = [-180, -90, 180, 90];
    switch (true) {
      case !value:
        this.isInvalid.emit(true);
        this.clearSpatialInput.emit();
        return {
          layerType: 'rectangle',
          invalid: true,
          message: errorMessages.empty,
        };
      case rectangle.some(point => Number.isNaN(+point)):
        this.isInvalid.emit(true);
        return {
          layerType: 'rectangle',
          invalid: true,
          message: errorMessages.coord,
        };
      case rectangle.length === 4 && !(bbox[0] <= +rectangle[0] && +rectangle[0] <= bbox[2] && bbox[1] <= +rectangle[1] && +rectangle[1] <= bbox[3]):
        this.isInvalid.emit(true);
        return {
          layerType: 'rectangle',
          invalid: true,
          message: errorMessages.range,
        };
      case rectangle.length > 4 || rectangle.length < 4:
        this.isInvalid.emit(true);
        return {
          layerType: 'rectangle',
          invalid: true,
          message: errorMessages.box,
        };
      default:
        this.isInvalid.emit(false);
        return {
          layerType: 'rectangle',
          invalid: false,
          message: null,
        };
    }
  }
  validateCircle(circle) {
    const errorMessages = {
      precision: 'Point coordinates have a maximum degree of precision of 3.',
      coord: 'A Point+Radius entry is invalid (empty, not a number, or not a degree coordinate (+/-90, +/-180).',
      increasing: 'Point+Radius should not cross anti-meridian or geographical poles.',
      range: "Point+Radius must intersect {{ constraints.bbox.join(', ') }}.",
      radiusSupported: 'Point+Radius is NOT supported by this data collection.  Please use a bounding box as your spatial extent or choose a different collection.',
    };
    switch (true) {
      case !circle.lat ||
        !circle.lng ||
        !circle.radius.value ||
        !this.isNumber(+circle.lat) ||
        !this.isNumber(+circle.lng) ||
        !this.isNumber(+circle.radius.value) ||
        Math.sign(+circle.radius.value) == -1 ||
        !this.isLatitude(+circle.lat) ||
        !this.isLongitude(+circle.lng):
        this.isInvalid.emit(true);
        return {
          layerType: 'circle',
          invalid: true,
          message: errorMessages.coord,
        };
      case circle.lat && circle.lng && (this.countDecimals(+circle.lat) > 3 || this.countDecimals(+circle.lng) > 3):
        // checks the degree of accuracy is within what is supported (precision of 3) 3 decimal place.
        this.isInvalid.emit(true);
        return {
          layerType: 'circle',
          invalid: true,
          message: errorMessages.precision,
        };
      case circle.lat && circle.lng && circle.radius.value && this.increasingCoordinates([+circle.lat, +circle.lng]):
        this.isInvalid.emit(true);
        return {
          layerType: 'circle',
          invalid: true,
          message: errorMessages.increasing,
        };
      default:
        this.isInvalid.emit(false);
        return {
          layerType: 'circle',
          invalid: false,
          message: null,
        };
    }
  }
  validatePoint(point) {
    const errorMessages = {
      precision: 'Point coordinates have a maximum degree of precision of 3.',
      coord: 'A point entry is invalid (empty, not a number, or not a degree coordinate (+/-90, +/-180).',
      range: 'Point must intersect -180, -90, 180, 90.',
    };
    switch (true) {
      case !point.lat || !point.lng || !this.isNumber(point.lat) || !this.isNumber(point.lng) || !this.isNumber(point.lng):
        this.isInvalid.emit(true);
        return {
          layerType: 'marker',
          invalid: true,
          message: errorMessages.coord,
        };
      case point.lat && point.lng && (this.countDecimals(point.lat) > 3 || this.countDecimals(point.lng) > 3):
        this.isInvalid.emit(true);
        return {
          layerType: 'marker',
          invalid: true,
          message: errorMessages.precision,
        };
      case !this.isLatitude(point.lat) || !this.isLongitude(point.lng):
        this.isInvalid.emit(true);
        return {
          layerType: 'marker',
          invalid: true,
          message: errorMessages.range,
        };
      default:
        this.isInvalid.emit(false);
        return {
          layerType: 'marker',
          invalid: false,
          message: null,
        };
    }
  }
  handleCircleLatitudeChange(event) {
    var _a, _b;
    const value = {
      lat: (_b = (_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.value,
      lng: this.selectedCircleLng,
      radius: {
        unit: this.selectedCircleRadUnit,
        value: this.selectedCircleRad,
      },
    };
    this.onValueChanged(value);
  }
  handleCircleLongitudeChange(event) {
    var _a, _b;
    const value = {
      lat: this.selectedCircleLat,
      lng: (_b = (_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.value,
      radius: {
        unit: this.selectedCircleRadUnit,
        value: this.selectedCircleRad,
      },
    };
    this.onValueChanged(value);
  }
  handleCircleRadiusChange(event) {
    var _a, _b;
    const value = {
      lat: this.selectedCircleLat,
      lng: this.selectedCircleLng,
      radius: {
        unit: this.selectedCircleRadUnit,
        value: (_b = (_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.value,
      },
    };
    this.onValueChanged(value);
  }
  handleCircleUnitChange(event) {
    var _a;
    const value = {
      lat: this.selectedCircleLat,
      lng: this.selectedCircleLng,
      radius: {
        unit: (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value,
        value: this.selectedCircleRad,
      },
    };
    this.onValueChanged(value);
  }
  handleMarkerLatitudeChange(event) {
    var _a, _b;
    const value = {
      lat: (_b = (_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.value,
      lng: this.selectedMarkerLng,
    };
    this.onValueChanged(value);
  }
  handleMarkerLongitudeChange(event) {
    var _a, _b;
    const value = {
      lat: this.selectedMarkerLat,
      lng: (_b = (_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.value,
    };
    this.onValueChanged(value);
  }
  handleBboxChange(event) {
    var _a, _b;
    this.selectedArea = (_b = (_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.value;
    this.onValueChanged(this.selectedArea);
  }
  renderMap() {
    return (h("gd-map", { "min-zoom": this.minZoom, "max-zoom": this.maxZoom, zoom: this.zoom, latitude: this.latitude, longitude: this.longitude, "fit-world": this.fitWorld, width: this.mapWidth, height: this.mapHeight, onMapInit: e => this.handleMapInit(e.detail), onDraw: e => this.handleDraw(e.detail), onClearDraw: () => this.onValueChanged(null), resize: this.displayMap, "draw-circle-option": this.circleDraw, "draw-marker-option": this.markerDraw, "marker-icon-url": this.markerIconUrl, "marker-icon-shadow-url": this.markerIconShadowUrl }));
  }
  renderMapContainer() {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
    return (h("div", { class: {
        'map-wrapper': true,
        'hide': this.useAsIcon,
      } }, this.selectedLayerType === 'rectangle' ? (h("bs-form-label", { htmlFor: 'spatialpicker-bounding-box' }, "Bounding Box:")) : this.selectedLayerType === 'circle' ? (h("bs-form-label", { "aria-hidden": "true" }, "Point and Radius:")) : this.selectedLayerType === 'marker' ? (h("bs-form-label", { "aria-hidden": "true" }, "Point:")) : null, h("div", { class: "d-flex justify-content-between", style: { maxWidth: `${this.mapWidth + 18}px` } }, this.selectedLayerType === 'rectangle' ? (h("div", { class: "inline mr-0" }, h("bs-form-control", { "control-id": "spatialpicker-bounding-box", as: "input", name: "spatialpicker-bounding-box", type: "text", value: this.selectedArea, onBsInput: e => this.handleBboxChange(e), isInvalid: ((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.invalid) && ((_b = this.errorMessage) === null || _b === void 0 ? void 0 : _b.layerType) === 'rectangle' }))) : this.selectedLayerType === 'circle' && this.circleDraw ? (h("div", { class: "inline mr-0" }, h("label", { class: "sr-only", htmlFor: "spatialpicker-point-circle-lat" }, "Latitude"), h("bs-form-control", { "control-id": "spatialpicker-point-circle-lat", as: "input", name: "spatialpicker-point-circle-lat", type: "text", value: this.selectedCircleLat, onBsInput: e => this.handleCircleLatitudeChange(e), isInvalid: ((_c = this.errorMessage) === null || _c === void 0 ? void 0 : _c.invalid) && ((_d = this.errorMessage) === null || _d === void 0 ? void 0 : _d.layerType) === 'circle', placeholder: "Latitude" }), h("label", { class: "sr-only", htmlFor: "spatialpicker-point-circle-lng" }, "Longitude"), h("bs-form-control", { "control-id": "spatialpicker-point-circle-lng", as: "input", name: "spatialpicker-point-circle-lng", type: "text", value: this.selectedCircleLng, onBsInput: e => this.handleCircleLongitudeChange(e), isInvalid: ((_e = this.errorMessage) === null || _e === void 0 ? void 0 : _e.invalid) && ((_f = this.errorMessage) === null || _f === void 0 ? void 0 : _f.layerType) === 'circle', placeholder: "Longitude" }, ' '), h("label", { class: "sr-only", htmlFor: "spatialpicker-point-circle-radius" }, "Radius"), h("bs-form-control", { "control-id": "spatialpicker-point-circle-radius", as: "input", name: "spatialpicker-point-circle-radius", type: "text", value: this.selectedCircleRad, onBsInput: e => this.handleCircleRadiusChange(e), isInvalid: ((_g = this.errorMessage) === null || _g === void 0 ? void 0 : _g.invalid) && ((_h = this.errorMessage) === null || _h === void 0 ? void 0 : _h.layerType) === 'circle', placeholder: "Radius" }, ' '), h("label", { class: "sr-only", htmlFor: "spatialpicker-point-circle-unit" }, "Units"), h("select", { name: "spatialpicker-point-circle-unit", id: "spatialpicker-point-circle-unit", onInput: e => {
        this.handleCircleUnitChange(e);
      }, class: {
        'spatial-form-select': true,
        'border border-danger': ((_j = this.errorMessage) === null || _j === void 0 ? void 0 : _j.invalid) && ((_k = this.errorMessage) === null || _k === void 0 ? void 0 : _k.layerType) === 'circle',
      } }, h("option", { value: "km", selected: this.selectedCircleRadUnit === 'km' }, "km"), h("option", { value: "m", selected: this.selectedCircleRadUnit === 'm' }, "m"), h("option", { value: "mi", selected: this.selectedCircleRadUnit === 'mi' }, "mi"), h("option", { value: "deg", selected: this.selectedCircleRadUnit === 'deg' }, "deg"), h("option", { value: "rad", selected: this.selectedCircleRadUnit === 'rad' }, "rad")))) : this.selectedLayerType === 'marker' && this.markerDraw ? (h("div", { class: "inline", style: { maxWidth: '300px' } }, h("label", { class: "sr-only", htmlFor: "spatialpicker-point-marker-lat" }, "Marker's Latitude"), h("bs-form-control", { "control-id": "spatialpicker-point-marker-lat", as: "input", name: "spatialpicker-point-marker-lat", type: "text", value: this.selectedMarkerLat, onBsInput: e => this.handleMarkerLatitudeChange(e), isInvalid: ((_l = this.errorMessage) === null || _l === void 0 ? void 0 : _l.invalid) && ((_m = this.errorMessage) === null || _m === void 0 ? void 0 : _m.layerType) === 'marker', placeholder: "Latitude" }), h("label", { class: "sr-only", htmlFor: "spatialpicker-point-marker-lng" }, "Marker's Longitude"), h("bs-form-control", { "control-id": "spatialpicker-point-marker-lng", as: "input", name: "spatialpicker-point-marker-lng", type: "text", value: this.selectedMarkerLng, onBsInput: e => this.handleMarkerLongitudeChange(e), isInvalid: ((_o = this.errorMessage) === null || _o === void 0 ? void 0 : _o.invalid) && ((_p = this.errorMessage) === null || _p === void 0 ? void 0 : _p.layerType) === 'marker', placeholder: "Longitude" }))) : null, this.useAsIcon && (h("div", { "data-test": "btn-default-range", class: "reset-range" }, h("bs-button", { onClick: () => this.resetRange() }, "Default Range")))), ((_q = this.errorMessage) === null || _q === void 0 ? void 0 : _q.invalid) && ((_r = this.errorMessage) === null || _r === void 0 ? void 0 : _r.layerType) === this.selectedLayerType && (h("span", { class: "text-danger d-block mb-3" }, (_s = this.errorMessage) === null || _s === void 0 ? void 0 : _s.message)), h("div", { class: "mt-3 map-container" }, this.renderMap()), h("p", { class: "mb-0" }, "Available Range: -180, -90, 180, 90")));
  }
  render() {
    return (h(Host, { class: {
        'spatial-icon-btn': this.useAsIcon,
      } }, console.log(this.variant), this.useAsIcon ? (h("div", { class: "spatial-btn-wrapper" }, h("bs-button", { class: `spatial-button btn btn-` + this.variant + ` ` + this.classes, variant: this.variant, disabled: this.disabled, onClick: () => this.showMapDisplay() }, h("bs-icon", { icon: "fas fa-map", size: 20 })), this.renderMapContainer())) : (h("div", null, this.renderMapContainer()))));
  }
  static get is() { return "gd-spatial-picker"; }
  static get originalStyleUrls() {
    return {
      "$": ["gd-spatial-picker.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["gd-spatial-picker.css"]
    };
  }
  static get properties() {
    return {
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "label",
        "reflect": false,
        "defaultValue": "'Select spatial area'"
      },
      "showMapIcon": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "show-map-icon",
        "reflect": false,
        "defaultValue": "true"
      },
      "value": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "SpatialRange",
          "resolved": "SpatialPoint | SpatialRadius | string",
          "references": {
            "SpatialRange": {
              "location": "local"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "value",
        "reflect": false,
        "defaultValue": "''"
      },
      "precision": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "precision",
        "reflect": false,
        "defaultValue": "3"
      },
      "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": "2"
      },
      "latitude": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "latitude",
        "reflect": false,
        "defaultValue": "0"
      },
      "longitude": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "longitude",
        "reflect": false,
        "defaultValue": "0"
      },
      "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"
      },
      "mapWidth": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "map-width",
        "reflect": false
      },
      "mapHeight": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "map-height",
        "reflect": false
      },
      "autocomplete": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "autocomplete",
        "reflect": false,
        "defaultValue": "false"
      },
      "circleDraw": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "use to enable circle draw"
        },
        "attribute": "circle-draw",
        "reflect": false,
        "defaultValue": "true"
      },
      "markerDraw": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "use to enable marker draw"
        },
        "attribute": "marker-draw",
        "reflect": false,
        "defaultValue": "true"
      },
      "disabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "use to disable spatial picker"
        },
        "attribute": "disabled",
        "reflect": false,
        "defaultValue": "false"
      },
      "useAsIcon": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "use spatial picker as an button w/icon instead of default input."
        },
        "attribute": "use-as-icon",
        "reflect": false,
        "defaultValue": "true"
      },
      "variant": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "if useAsIcon optn set, choose bootstrap button style"
        },
        "attribute": "variant",
        "reflect": false,
        "defaultValue": "'light'"
      },
      "classes": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "if useAsIcon optn set, you can added styling class names such as boostrap utility classes to adjust button"
        },
        "attribute": "classes",
        "reflect": false,
        "defaultValue": "''"
      },
      "markerIconUrl": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "marker icon for map"
        },
        "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": "marker shadow icon for map"
        },
        "attribute": "marker-icon-shadow-url",
        "reflect": false,
        "defaultValue": "'marker-shadow.png'"
      }
    };
  }
  static get states() {
    return {
      "selectedArea": {},
      "selectedCircleLat": {},
      "selectedCircleLng": {},
      "selectedCircleRad": {},
      "selectedCircleRadUnit": {},
      "selectedMarkerLat": {},
      "selectedMarkerLng": {},
      "displayMap": {},
      "invalid": {},
      "errorMessage": {},
      "selectedLayerType": {}
    };
  }
  static get events() {
    return [{
        "method": "spatialPickerInit",
        "name": "spatialPickerInit",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }, {
        "method": "valueChanged",
        "name": "valueChanged",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }, {
        "method": "isInvalid",
        "name": "isInvalid",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }, {
        "method": "clearSpatialInput",
        "name": "clearSpatialInput",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }];
  }
  static get elementRef() { return "el"; }
  static get listeners() {
    return [{
        "name": "mapDrawClicked",
        "method": "mapDrawSelectedHandler",
        "target": undefined,
        "capture": true,
        "passive": false
      }, {
        "name": "click",
        "method": "closeSpatialPicker",
        "target": "document",
        "capture": true,
        "passive": false
      }];
  }
}
