/* COPYRIGHT Esri - https://js.arcgis.com/1.2/LICENSE.txt */
import { c as r } from "../../chunks/runtime.js";
import { u as c } from "../../chunks/useT9n.js";
import { css as l, html as n } from "lit";
import { createRef as d, ref as p } from "lit-html/directives/ref.js";
import { LitElement as g, createEvent as o, noShadowRoot as m, safeClassMap as h } from "@arcgis/lumina";
import { useContextConsumer as f } from "@arcgis/lumina/context";
import { p as y } from "../../chunks/publicNotificationContext.js";
import _ from "@arcgis/core/layers/GraphicsLayer";
import k from "@arcgis/core/widgets/Sketch/SketchViewModel";
import w from "@arcgis/core/widgets/Sketch";
const b = l`@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 u extends g {
  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 = f({
      context: y,
      subscribe: !0
    }), this._sketchElement = d(), this.selectionLoadingChange = o(), this.sketchGraphicsChange = o(), this.drawUndo = o(), this.drawRedo = o();
  }
  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 = b;
  }
  static {
    this.shadowRootOptions = m;
  }
  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, i) {
    e && e.length > 0 && JSON.stringify(e) !== JSON.stringify(i) && this._sketchGraphicsLayer && (this._updateGraphicsSymbols(e), this._sketchGraphicsLayer.removeAll(), this._sketchGraphicsLayer.addMany(e));
  }
  mapViewWatchHandler(e, i) {
    e && e !== i && this._init();
  }
  async clear() {
    this._clearSketch();
  }
  async updateGraphics() {
    this._updateGraphics();
  }
  loaded() {
    this._init();
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this._sketchWidget?.cancel(), this._clearSketch();
  }
  render() {
    const e = this.drawMode === "SKETCH" ? "border" : "border esri-widget esri-sketch__panel", i = this.drawMode === "SKETCH" ? "display-none" : "esri-widget esri-sketch__panel border-left esri-sketch__section";
    return n`<div class=${h(e)}><div ${p(this._sketchElement)}></div><div class=${h(i)}><calcite-action appearance=solid .disabled=${!this.undoEnabled} icon=undo @click=${() => this._undo()} scale=s .text=${this._translations.undo}></calcite-action><calcite-action appearance=solid .disabled=${!this.redoEnabled} icon=redo @click=${() => this._redo()} scale=s .text=${this._translations.redo}></calcite-action></div></div>`;
  }
  _init() {
    this.mapView && this._sketchElement.value && (this._initGraphicsLayer(), this._initSketch());
  }
  _initGraphicsLayer() {
    const e = this._pnContextConsumer.value, i = this._translations.sketchLayer;
    if (this.mapView) {
      const s = this.mapView.map.layers.findIndex((t) => t.title === i);
      s > -1 ? this._sketchGraphicsLayer = this.mapView.map.layers.getItemAt(s) : (this._sketchGraphicsLayer = new _({ title: i, listMode: "hide" }), this._sketchGraphicsLayer && (e.managedLayers[i] = "sketch", this.mapView.map.layers.add(this._sketchGraphicsLayer))), this.graphics && this.graphics.length > 0 && this._sketchGraphicsLayer && this._sketchGraphicsLayer.addMany(this.graphics);
    }
  }
  _initSketch() {
    const e = {
      layer: this._sketchGraphicsLayer,
      view: this.mapView,
      defaultCreateOptions: {
        mode: "hybrid"
      },
      defaultUpdateOptions: {
        preserveAspectRatio: !1,
        enableScaling: !1,
        enableRotation: !1,
        tool: "reshape",
        toggleToolOnClick: !1
      }
    };
    if (this._sketchWidget = new w({
      ...e,
      container: this._sketchElement.value,
      creationMode: "single",
      toolbarKind: "docked",
      visibleElements: {
        duplicateButton: !1,
        selectionTools: {
          "lasso-selection": !1,
          "rectangle-selection": !1
        },
        createTools: {
          circle: !1
        },
        undoRedoMenu: !1,
        settingsMenu: this.drawMode === "SKETCH"
      }
    }), this._sketchWidget && this._sketchWidget.viewModel) {
      this._sketchViewModel = new k({
        ...e
      }), this.polylineSymbol && (this._sketchWidget.viewModel.polylineSymbol = this.polylineSymbol), this.pointSymbol && (this._sketchWidget.viewModel.pointSymbol = this.pointSymbol), this.polygonSymbol && (this._sketchWidget.viewModel.polygonSymbol = this.polygonSymbol), this._sketchWidget?.when(async () => {
        await new Promise((a) => setTimeout(a, 50)), this._sketchElement.value?.getElementsByTagName("calcite-popover")[0]?.setAttribute("placement", "auto");
      });
      let i = !1;
      this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("create", (t) => {
        t.state === "complete" && (this.graphics = t.graphic ? [t.graphic] : [], this.sketchGraphicsChange.emit({
          graphics: this.graphics,
          useOIDs: !1
        }), this.drawMode === "REFINE" && (i = !0, this._sketchWidget?.viewModel.create(t.tool))), t.state === "cancel" && this.drawMode === "REFINE" && i && (i = !i, this._sketchWidget?.viewModel.create(t.tool));
      }));
      let s;
      this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("update", (t) => {
        if (!this.editGraphicsEnabled)
          this._sketchWidget?.viewModel.cancel(), this._sketchViewModel?.cancel();
        else {
          const a = t?.toolEventInfo?.type;
          (a === "move" || a === "reshape-stop" || a === "move-stop") && (clearTimeout(s), s = window.setTimeout(async () => {
            this.graphics = t.graphics, this.sketchGraphicsChange.emit({
              graphics: this.graphics,
              useOIDs: !1
            });
          }, 1e3));
        }
      })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("delete", () => {
        this.graphics = [], this.sketchGraphicsChange.emit({
          graphics: this.graphics,
          useOIDs: !1
        });
      })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("undo", (t) => {
        this.graphics = t.graphics, this.sketchGraphicsChange.emit({
          graphics: this.graphics,
          useOIDs: !1
        });
      })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("redo", (t) => {
        this.graphics = t.graphics, this.sketchGraphicsChange.emit({
          graphics: this.graphics,
          useOIDs: !1
        });
      }));
    }
  }
  _clearSketch() {
    this._sketchWidget?.viewModel.cancel(), this.graphics = [], this._sketchGraphicsLayer?.removeAll();
  }
  _undo() {
    this.drawUndo.emit();
  }
  _redo() {
    this.drawRedo.emit();
  }
  _updateGraphics() {
    setTimeout(() => {
      this.graphics.length === 1 && this._sketchWidget && this._sketchWidget.update(this.graphics, {
        tool: "reshape",
        enableRotation: !1,
        enableScaling: !1,
        preserveAspectRatio: !1,
        toggleToolOnClick: !1
      });
    }, 100);
  }
  _updateGraphicsSymbols(e) {
    const s = e[0]?.geometry?.type, t = s === "point" ? this.pointSymbol : s === "polyline" ? this.polylineSymbol : s === "polygon" ? this.polygonSymbol : void 0;
    t && e.forEach((a) => a.symbol = t);
  }
}
r("map-draw-tools", u);
export {
  u as MapDrawTools
};
