/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as h } from "../../chunks/runtime.js";
import { u as c } from "../../chunks/useT9n.js";
import { css as n, html as l } from "lit";
import { createRef as p, ref as d } from "lit-html/directives/ref.js";
import { LitElement as m, createEvent as a, noShadowRoot as g, safeClassMap as o } from "@arcgis/lumina";
import { useContextConsumer as u } from "@arcgis/lumina/context";
import { p as _ } from "../../chunks/publicNotificationContext.js";
import y from "@arcgis/core/layers/GraphicsLayer.js";
const f = n`@layer{:host{display:block}.border{outline:1px solid var(--calcite-color-border-input)}.border-left{border-left:1px solid rgba(110,110,110,.3)}.border-left[dir=rtl]{border-right:1px solid rgba(110,110,110,.3)}.esri-widget{box-sizing:border-box;color:#323232;font-size:14px;font-family:Avenir Next,Helvetica Neue,Helvetica,Arial,sans-serif;line-height:1.3em;background-color:#fff;--esri-widget-padding-v: 12px;--esri-widget-padding-h: 15px;--esri-widget-padding: var(--esri-widget-padding-v) var(--esri-widget-padding-h)}.esri-sketch__panel{align-items:center;display:flex;flex-flow:row wrap;padding:0;justify-content:flex-start!important}.esri-sketch__section{align-items:center;display:flex;flex-flow:row wrap;padding:0 7px;margin:6px 0}.esri-responsive-toolbar__bar--horizontal{--calcite-action-group-border-color: var(--calcite-color-border-3) !important}}`;
class k extends m {
  constructor() {
    super(...arguments), this.active = !1, this.drawMode = "SKETCH", this.editGraphicsEnabled = !0, this.graphics = [], this.redoEnabled = !1, this.undoEnabled = !1, this._translations = c({ name: "map-draw-tools", blocking: !0 }), this._pnContextConsumer = u({
      context: _,
      subscribe: !0
    }), this._sketchComponent = p(), this._forceCreate = !1, this.selectionLoadingChange = a(), this.sketchGraphicsChange = a(), this.drawUndo = a(), this.drawRedo = a(), this._onSketchReady = async () => {
      await new Promise((t) => setTimeout(t, 50)), this._sketchComponent.value?.getElementsByTagName("calcite-popover")[0]?.setAttribute("placement", "auto");
    }, this._onSketchCreate = (e) => {
      const t = e.detail;
      t.state === "complete" && (this.graphics = t.graphic ? [t.graphic] : [], this.sketchGraphicsChange.emit({
        graphics: this.graphics,
        useOIDs: !1
      }), this.drawMode === "REFINE" && (this._forceCreate = !0, this._sketchComponent.value?.create(t.tool))), t.state === "cancel" && this.drawMode === "REFINE" && this._forceCreate && (this._forceCreate = !this._forceCreate, this._sketchComponent.value?.create(t.tool));
    }, this._onSketchUpdate = (e) => {
      if (!this.editGraphicsEnabled) {
        this._sketchComponent.value?.cancel();
        return;
      }
      const t = e.detail, i = t.toolEventInfo?.type;
      (t.state === "active" && i === "update" || i === "move" || i === "reshape-stop" || i === "move-stop") && (clearTimeout(this._debounceTimer), this._debounceTimer = window.setTimeout(() => {
        this.graphics = t.graphics, this.sketchGraphicsChange.emit({
          graphics: this.graphics,
          useOIDs: !1
        });
      }, 1e3));
    }, this._onSketchDelete = () => {
      this.graphics = [], this.sketchGraphicsChange.emit({
        graphics: this.graphics,
        useOIDs: !1
      });
    }, this._onSketchUndo = (e) => {
      if (this._sketchComponent.value?.state === "active")
        return;
      const t = e.detail;
      this.graphics = t.graphics, this.sketchGraphicsChange.emit({
        graphics: this.graphics,
        useOIDs: !1
      });
    }, this._onSketchRedo = (e) => {
      if (this._sketchComponent.value?.state === "active")
        return;
      const t = e.detail;
      t.graphics[0].geometry && (this.graphics = t.graphics, this.sketchGraphicsChange.emit({
        graphics: this.graphics,
        useOIDs: !1
      }));
    };
  }
  static {
    this.properties = { active: 5, drawMode: 1, editGraphicsEnabled: 5, graphics: 0, mapView: 0, pointSymbol: 0, polylineSymbol: 0, polygonSymbol: 0, redoEnabled: 5, undoEnabled: 5, _translations: 16, _selectionMode: 16 };
  }
  static {
    this.styles = f;
  }
  static {
    this.shadowRootOptions = g;
  }
  willUpdate(e) {
    e.has("graphics") && this.graphicsWatchHandler(this.graphics, e.get("graphics")), e.has("mapView") && this.mapView && this.mapViewWatchHandler(this.mapView, e.get("mapView"));
  }
  graphicsWatchHandler(e, t) {
    e && e.length > 0 && JSON.stringify(e) !== JSON.stringify(t) && this._sketchGraphicsLayer && (this._updateGraphicsSymbols(e), this._sketchGraphicsLayer.removeAll(), this._sketchGraphicsLayer.addMany(e));
  }
  mapViewWatchHandler(e, t) {
    e && e !== t && this._init();
  }
  async clear() {
    this._clearSketch();
  }
  async updateGraphics() {
    this._updateGraphics();
  }
  loaded() {
    this._init();
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this._sketchComponent.value?.cancel(), this._clearSketch();
  }
  render() {
    const e = this.drawMode === "SKETCH" ? "border" : "border esri-widget esri-sketch__panel", t = this.drawMode === "SKETCH" ? "display-none" : "esri-widget esri-sketch__panel border-left esri-sketch__section";
    return l`<div class=${o(e)}><arcgis-sketch @arcgisReady=${this._onSketchReady} @arcgisCreate=${this._onSketchCreate} @arcgisUpdate=${this._onSketchUpdate} @arcgisDelete=${this._onSketchDelete} @arcgisUndo=${this._onSketchUndo} @arcgisRedo=${this._onSketchRedo} use-legacy-create-tools ${d(this._sketchComponent)}></arcgis-sketch><div class=${o(t)}><calcite-action .disabled=${!this.undoEnabled} icon=undo @click=${() => this._undo()} scale=s .text=${this._translations.undo}></calcite-action><calcite-action .disabled=${!this.redoEnabled} icon=redo @click=${() => this._redo()} scale=s .text=${this._translations.redo}></calcite-action></div></div>`;
  }
  _init() {
    this.mapView && (this._initGraphicsLayer(), this._initSketch());
  }
  _initGraphicsLayer() {
    const e = this._pnContextConsumer.value, t = this._translations.sketchLayer;
    if (this.mapView) {
      const i = this.mapView.map.layers.findIndex((s) => s.title === t);
      i > -1 ? this._sketchGraphicsLayer = this.mapView.map.layers.getItemAt(i) : (this._sketchGraphicsLayer = new y({ title: t, listMode: "hide" }), this._sketchGraphicsLayer && (e.managedLayers[t] = "sketch", this.mapView.map.layers.add(this._sketchGraphicsLayer))), this.graphics && this.graphics.length > 0 && this._sketchGraphicsLayer && this._sketchGraphicsLayer.addMany(this.graphics);
    }
  }
  _initSketch() {
    const e = this._sketchComponent.value;
    e && (e.view = this.mapView, e.layer = this._sketchGraphicsLayer, e.creationMode = "single", e.toolbarKind = "docked", e.defaultCreateOptions = { mode: "hybrid" }, e.defaultUpdateOptions = {
      preserveAspectRatio: !1,
      enableScaling: !1,
      enableRotation: !1,
      tool: "reshape",
      toggleToolOnClick: !1
    }, e.hideDuplicateButton = !0, e.hideSelectionToolsLassoSelection = !0, e.hideSelectionToolsRectangleSelection = !0, e.hideCreateToolsCircle = !0, e.hideUndoRedoMenu = !0, e.hideSettingsMenu = this.drawMode !== "SKETCH", this.pointSymbol ? e.pointSymbol = this.pointSymbol : this.polylineSymbol ? e.polylineSymbol = this.polylineSymbol : this.polygonSymbol && (e.polygonSymbol = this.polygonSymbol));
  }
  _clearSketch() {
    this._sketchComponent.value?.cancel(), this.graphics = [], this._sketchGraphicsLayer?.removeAll();
  }
  _undo() {
    this.drawUndo.emit();
  }
  _redo() {
    this.drawRedo.emit();
  }
  _updateGraphics() {
    setTimeout(() => {
      this.graphics.length === 1 && this.graphics[0].geometry && this._sketchComponent.value && this._sketchComponent.value.triggerUpdate(this.graphics);
    }, 100);
  }
  _updateGraphicsSymbols(e) {
    const i = e[0]?.geometry?.type, s = i === "point" ? this.pointSymbol : i === "polyline" ? this.polylineSymbol : i === "polygon" ? this.polygonSymbol : void 0;
    s && e.forEach((r) => r.symbol = s);
  }
}
h("map-draw-tools", k);
export {
  k as MapDrawTools
};
