import { Component, Prop, Host, Event, h, Watch, State, Element } from '@stencil/core';
export class SpatialPicker {
  constructor() {
    this.label = 'Select spatial area';
    this.showMapIcon = true;
    this.value = '';
    this.precision = 2;
    this.minZoom = 0;
    this.maxZoom = 24;
    this.zoom = 2;
    this.latitude = 0;
    this.longitude = 0;
    this.fitWorld = false;
    this.autocomplete = false;
    /**
     * use to disable spatial picker
     */
    this.disabled = false;
    /**
     * use spatial picker as an icon instead of default input.
     */
    this.useAsIcon = false;
    this.selectedArea = '';
    this.displayMap = false;
  }
  componentDidLoad() {
    this.inputEl = this.el.querySelector('gd-input');
    this.onValueChanged(this.value);
    if (this.useAsIcon) {
      document.addEventListener('click', event => {
        if (!event.target.closest('.spatial-icon-btn')) {
          if (!this.el.querySelector('.map-wrapper').classList.contains('hide')) {
            this.el.querySelector('.map-wrapper').classList.add('hide');
          }
        }
      });
    }
  }
  handleMapInit(map) {
    this.map = map;
    this.map.addDrawControl();
    this.spatialPickerInit.emit(this.map);
    if (this.value)
      this.drawSpatialArea(this.value);
  }
  handleDraw(bounds) {
    let northeast = bounds.getNorthEast();
    let southwest = bounds.getSouthWest();
    let box = this.map.normalizeBox([southwest.lng, southwest.lat, northeast.lng, northeast.lat]);
    let formattedValue = this.formatValueToPrecision(box.join(','), this.precision);
    this.handleSpatialAreaChanged(formattedValue);
  }
  onValueChanged(value, formatPrecision = false) {
    let formattedValue = formatPrecision ? this.formatValueToPrecision(value, this.precision) : value;
    // skip invalid values
    if (formattedValue.indexOf('NaN') > -1) {
      return;
    }
    this.drawSpatialArea(formattedValue);
    this.handleSpatialAreaChanged(formattedValue);
  }
  setValueToInputValue(value) {
    this.value = value;
  }
  handleSpatialAreaChanged(area) {
    this.selectedArea = area;
    this.valueChanged.emit(area);
  }
  formatValueToPrecision(value, precision) {
    return (value &&
      value
        .split(',')
        .map(number => parseFloat(number).toFixed(precision))
        .join(','));
  }
  drawSpatialArea(area) {
    if (!this.map || !area)
      return;
    let bounds = area.split(',').map(coord => parseFloat(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]],
    ]);
  }
  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);
  }
  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 }));
  }
  render() {
    return (h(Host, { class: {
        'spatial-icon-btn': this.useAsIcon,
      } }, this.useAsIcon ? (h("div", { class: "spatial-btn-wrapper" },
      h("bs-button", { variant: "light", disabled: this.disabled, title: this.label, onClick: () => this.showMapDisplay() },
        h("bs-icon", { icon: "fas fa-map", size: 20 })),
      h("div", { class: "map-wrapper hide" },
        h("div", { class: "map-container" }, this.renderMap())))) : (h("div", null,
      h("bs-form-row", null,
        h("bs-form-group", null,
          h("bs-form-label", null, this.label),
          h("bs-form-control", { "control-id": `spatialpicker-${this.label.replace(/ /g, '')}`, as: "input", name: `spatialpicker-${this.label.replace(/ /g, '')}`, type: "text", value: this.selectedArea, onBsInput: e => { var _a, _b; return this.setValueToInputValue((_b = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.value); }, onClick: () => this.showMap() }))),
      h("div", { class: "map-container" }, this.renderMap())))));
  }
  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": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "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": "2"
    },
    "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"
    },
    "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 icon instead of default input."
      },
      "attribute": "use-as-icon",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "selectedArea": {},
    "displayMap": {}
  }; }
  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": {}
      }
    }]; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "value",
      "methodName": "onValueChanged"
    }]; }
}
