/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as B } from "../../chunks/runtime.js";
import { keyed as X } from "lit/directives/keyed.js";
import "@arcgis/toolkit/intl";
import { cloneDeep as E } from "lodash-es";
import "luxon";
import "d3-array";
import { i as p, cQ as N, cR as k, cS as F, aQ as Z } from "../../chunks/index.js";
import "@esri/arcgis-html-sanitizer";
import { W as q } from "../../chunks/series-types.js";
import "@arcgis/toolkit/type";
import { f as u, a as z } from "../../chunks/rest-js-object-literals.js";
import "@arcgis/core/geometry/support/jsonUtils.js";
import "@arcgis/core/rest/support/AttributeBinsQuery.js";
import "@arcgis/core/rest/support/StatisticDefinition.js";
import "@arcgis/core/time/TimeExtent.js";
import "@arcgis/core/core/promiseUtils.js";
import "@arcgis/core/request.js";
import { c as g, b as O } from "../../chunks/index4.js";
import "@arcgis/core/intl.js";
import { r as V } from "../../chunks/popover-ui-utils.js";
import { m as G, d as W, g as U, h as L, U as S } from "../../chunks/chart-ui-utils2.js";
import { d as M } from "../../chunks/default.js";
import { g as Y } from "../../chunks/resource.js";
import { u as Q } from "../../chunks/useT9n.js";
import { css as j, html as c } from "lit";
import { createRef as h, ref as m } from "lit/directives/ref.js";
import { LitElement as H, createEvent as J, renderElement as A, safeStyleMap as _, safeClassMap as o } from "@arcgis/lumina";
import { G as b } from "../../chunks/common.js";
import { l as K, p as ee, q as te } from "../../chunks/type-guards.js";
const n = {
  row: "row",
  column: "column",
  colorPicker: "color-picker"
}, ie = j`.hide{visibility:hidden}.am5-html-container{z-index:101!important}.am5-layer-1000{z-index:1000!important}.am5-layer-30{z-index:100!important}.show{display:block}.notifyPanel{flex:0 1 auto}.disable-interactions{pointer-events:none}.dim-text{color:var(--arcgis-charts-dim-text)}:host{display:flex;flex-direction:column}.row{display:flex;flex-direction:row;column-gap:var(--arcgis-charts-inter-section-margin)}.column{display:flex;flex-direction:column;flex-wrap:wrap;flex-grow:1}.column>calcite-input{margin-bottom:.5rem;flex-grow:2}.column>calcite-input[type=number]{margin-bottom:.5rem}input{padding:.5rem}.label{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:var(--arcgis-charts-intra-section-margin);flex-grow:1}.color-picker{border:1px solid var(--calcite-color-border-2);box-shadow:none;margin-bottom:var(--arcgis-charts-inter-section-margin)}.delete-guide{display:flex;flex-direction:row-reverse;height:2rem;margin:0 1rem;font-weight:550}.delete-guide:dir(rtl){flex-direction:row}`;
class se extends H {
  constructor() {
    super(...arguments), this._messages = Q(), this.startCalciteInput = h(), this.endCalciteInput = h(), this.startDateCalciteInput = h(), this.endDateCalciteInput = h(), this.startTimeCalciteInput = h(), this.endTimeCalciteInput = h(), this.colorElement = h(), this.colorChange = (e) => {
      const t = e.detail, i = this.model.getGuideStart(this.index, this.orientation), a = this.model.getGuideEnd(this.index, this.orientation);
      if (p(i, a) === u.SLS) {
        const l = E(M.style), s = this.model.getGuideStyle(this.index, this.orientation), r = {
          ...l,
          ...g(s) ? s : {},
          color: t
        };
        this.lineStyleChange({ detail: r });
      } else
        this.setColor(t);
    }, this.symbolChange = (e) => {
      const t = e?.detail, i = this.model.getGuideStart(this.index, this.orientation), a = this.model.getGuideEnd(this.index, this.orientation);
      if (p(i, a) === u.SLS) {
        const l = E(M.style), s = this.model.getGuideStyle(this.index, this.orientation), r = {
          ...l,
          ...g(s) ? s : {},
          ...g(t) ? t : {}
        };
        this.lineStyleChange({ detail: r });
      } else t?.color !== void 0 && this.setColor(t.color);
    }, this.onModelConfigChange = () => {
      this.requestUpdate();
    }, this.guidePopover = null, this.latestGuidePosition = 0, this.arcgisChartsConfigGuideChange = J();
  }
  static {
    this.properties = { guidePopover: 16, messageOverrides: 0, model: 0, timeZone: 1, calculatedMinMaxBounds: 0, index: 9, orientation: 1, latestGuidePosition: 9 };
  }
  static {
    this.styles = ie;
  }
  get isXAxisDateField() {
    return this.orientation === b.X && K(this.model) && this.model.getAxisValueFormat(0)?.type === q.DateAxisFormat;
  }
  load() {
    this.modelChange(this.model);
  }
  willUpdate(e) {
    e.has("model") && this.modelChange(this.model, e.get("model"));
  }
  loaded() {
    this.isXAxisDateField && this.setGuideDateTimeRange();
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.model.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
  }
  modelChange(e, t) {
    t?.removeEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange), e?.addEventListener("arcgisChartsModelConfigChange", this.onModelConfigChange);
  }
  onColorElementSelect(e) {
    this.guidePopover?.open === !0 ? this.removeGuidePopover() : this.setupGuidePopover(e);
  }
  setGuideStart(e) {
    const { value: t } = e.target;
    this.startCalciteInput.value !== void 0 && (t === "" ? G({
      inputElement: this.startCalciteInput.value,
      status: S.INVALID
    }) : (this.model.setGuideStart(t, this.index, this.orientation), this.symbolChange(), this.arcgisChartsConfigGuideChange.emit({
      index: this.index,
      orientation: this.orientation,
      isDelete: !1
    }), G({
      inputElement: this.startCalciteInput.value,
      status: S.IDLE
    }))), this.guidePopover?.open === !0 && this.removeGuidePopover();
  }
  setGuideEnd(e) {
    const { value: t } = e.target;
    this.endCalciteInput.value !== void 0 && (this.model.setGuideEnd(t === "" ? null : t, this.index, this.orientation), this.symbolChange(), this.arcgisChartsConfigGuideChange.emit({
      index: this.index,
      orientation: this.orientation,
      isDelete: !1
    }), G({
      inputElement: this.endCalciteInput.value,
      status: S.IDLE
    })), this.guidePopover?.open === !0 && this.removeGuidePopover();
  }
  setGuideDateTimeRange() {
    const e = this.calculatedMinMaxBounds?.find((d) => d.isXAxis)?.minimum, t = this.calculatedMinMaxBounds?.find((d) => d.isXAxis)?.maximum, i = typeof e == "number" ? new Date(e) : /* @__PURE__ */ new Date(), a = typeof t == "number" ? new Date(t) : /* @__PURE__ */ new Date(), l = new window.Intl.DateTimeFormat().resolvedOptions().timeZone, s = N(this.timeZone) ?? l, r = k(i, s), v = F(i, s), f = k(a, s), R = F(a, s), T = this.startDateCalciteInput.value?.value ?? "", C = T === "" ? r : T, D = this.startTimeCalciteInput.value?.value ?? "", I = D === "" ? v : D, x = this.endDateCalciteInput.value?.value ?? "", y = x === "" ? f : x, w = this.endTimeCalciteInput.value?.value ?? "", P = w === "" ? R : w;
    let $ = !1;
    if (!Array.isArray(C) && C !== void 0 && I !== void 0) {
      const d = `${C}T${I}`;
      this.model.setGuideStart(d, this.index, this.orientation), $ = !0;
    }
    if (!Array.isArray(y) && y !== void 0 && P !== void 0) {
      const d = x === "" ? void 0 : `${y}T${P}`;
      this.model.setGuideEnd(d, this.index, this.orientation), $ = !0;
    }
    $ && (this.symbolChange(), this.arcgisChartsConfigGuideChange.emit({
      index: this.index,
      orientation: this.orientation,
      isDelete: !1
    }), this.guidePopover?.open === !0 && this.removeGuidePopover());
  }
  setGuideName(e) {
    const t = e.target.value;
    this.model.setGuideName(t, this.index, this.orientation), this.arcgisChartsConfigGuideChange.emit({
      index: this.index,
      orientation: this.orientation,
      isDelete: !1
    });
  }
  setGuideLabel(e) {
    const t = e.target.value;
    this.model.setGuideLabelText(t, this.index, this.orientation), this.arcgisChartsConfigGuideChange.emit({
      index: this.index,
      orientation: this.orientation,
      isDelete: !1
    });
  }
  setGuideRendered(e) {
    const t = e.target?.selectedItem?.value;
    if (t !== void 0) {
      const i = t === this._messages.inFront;
      this.model.setGuideAbove(i, this.index, this.orientation), this.arcgisChartsConfigGuideChange.emit({
        index: this.index,
        orientation: this.orientation,
        isDelete: !1
      });
    }
  }
  lineStyleChange(e) {
    const t = e.detail;
    this.model.setGuideStyle(t, this.index, this.orientation), this.arcgisChartsConfigGuideChange.emit({
      index: this.index,
      orientation: this.orientation,
      isDelete: !1
    });
  }
  setupGuidePopover(e) {
    e.stopImmediatePropagation();
    const t = this.model.getGuideStyle(this.index, this.orientation), i = this.model.getGuideStart(this.index, this.orientation), a = this.model.getGuideEnd(this.index, this.orientation);
    let l;
    p(i, a) === u.SLS ? l = g(t) ? t : void 0 : l = t?.color;
    const s = this.colorElement.value;
    Array.isArray(t?.color) ? (this.guidePopover = A(c`<arcgis-charts-config-guide-popover .referenceElement=${s} open .selectedElement=${l} @arcgisChartsConfigGuidePopoverColorChange=${this.colorChange} @arcgisChartsConfigGuidePopoverSymbolChange=${this.symbolChange} @arcgisChartsConfigPopoverClose=${this.removeGuidePopover}></arcgis-charts-config-guide-popover>`), this.guidePopover !== void 0 && !document.body.contains(this.guidePopover) && document.body.appendChild(this.guidePopover)) : this.removeGuidePopover();
  }
  removeGuidePopover() {
    this.guidePopover !== null && this.guidePopover !== void 0 && (this.guidePopover = V(this.guidePopover));
  }
  setColor(e) {
    const t = Z({ opacity: 0 }), i = this.model.getGuideStyle(this.index, this.orientation), a = {
      ...O(i) ? i : {},
      type: u.SFS,
      color: e,
      outline: t
    };
    this.model.setGuideStyle(a, this.index, this.orientation), this.arcgisChartsConfigGuideChange.emit({
      index: this.index,
      orientation: this.orientation,
      isDelete: !1
    });
  }
  getDateStringFromBound(e) {
    return typeof e == "string" ? e.split("T")[0] : "";
  }
  getTimeStringFromBound(e) {
    return typeof e == "string" ? e.split("T")[1] : "";
  }
  createTooltip(e) {
    const t = e.target;
    let i = "";
    switch (t.icon) {
      case "view-visible":
        i = this._messages.hideGuide ?? "";
        break;
      case "view-hide":
        i = this._messages.showGuide ?? "";
        break;
      case "trash":
      default:
        i = this._messages.deleteGuide ?? "";
        break;
    }
    this.tooltip = A(c`<calcite-tooltip style=${_({ opacity: 1, zIndex: "var(--calcite-floating-ui-z-index)" })} .referenceElement=${t} open placement=top>${i}</calcite-tooltip>`), document.body.appendChild(this.tooltip);
  }
  toggleGuide() {
    const e = this.model.getGuideVisibility(this.index, this.orientation);
    this.model.setGuideVisibility(!e, this.index, this.orientation);
  }
  destroyTooltip() {
    W(this.tooltip);
  }
  deleteGuide() {
    this.destroyTooltip(), this.orientation === b.X && ee(this.model) ? this.model.deleteXAxisGuide(this.index) : this.orientation === b.Y && te(this.model) && this.model.deleteYAxisGuide(this.index), this.arcgisChartsConfigGuideChange.emit({
      index: this.index,
      orientation: this.orientation,
      isDelete: !0
    });
  }
  renderColorElement() {
    const e = this.model.getGuideStyle(this.index, this.orientation), [t, i, a, l] = [...e?.color ?? [1, 1, 1, 255]], s = this.model.getGuideStart(this.index, this.orientation), r = this.model.getGuideEnd(this.index, this.orientation), v = g(e) ? U(e.style) : z.Solid, f = p(s, r) === u.SLS ? `line-${v}` : "square-f";
    return c`<calcite-list label selection-mode=single selection-appearance=border><calcite-list-item .value=${this._messages.style} class=${o(n.colorPicker)} .label=${this._messages.style} .selected=${this.guidePopover?.open} @click=${this.onColorElementSelect} ${m(this.colorElement)}><calcite-icon slot=content-end .icon=${f} style=${_({ color: `rgba(${t},${i},${a},${l / 255})` })}></calcite-icon></calcite-list-item></calcite-list>`;
  }
  render() {
    const e = this.model.getGuideStart(this.index, this.orientation), t = this.model.getGuideEnd(this.index, this.orientation), i = this.model.getGuideName(this.index, this.orientation), a = this.model.getGuideLabelText(this.index, this.orientation), l = this.model.getGuideAbove(this.index, this.orientation), s = this.model.getGuideVisibility(this.index, this.orientation), r = this.isXAxisDateField;
    return c`<calcite-block .heading=${i ?? ""} .expanded=${this.latestGuidePosition === Y(this.index, this.orientation, this.model)} collapsible .messageOverrides=${{
      expand: this._messages.expand,
      collapse: this._messages.collapse
    }}><calcite-action slot=control text .icon=${s ? "view-visible" : "view-hide"} @click=${this.toggleGuide} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip}></calcite-action><calcite-action slot=control text icon=trash @click=${this.deleteGuide} @mouseover=${this.createTooltip} @mouseout=${this.destroyTooltip}></calcite-action><div class=${o(n.row)}><calcite-label class=${o(n.column)}>${this._messages.start}${r ? c`<calcite-input-date-picker .value=${this.getDateStringFromBound(e)} required scale=s placement=bottom-end @calciteInputDatePickerChange=${this.setGuideDateTimeRange} ${m(this.startDateCalciteInput)}></calcite-input-date-picker>` : c`<calcite-input type=number required @calciteInputInput=${this.setGuideStart} @keydown=${L} number-button-type=none .value=${e?.toString()} ${m(this.startCalciteInput)}></calcite-input>`}</calcite-label><calcite-label class=${o(n.column)}>${this._messages.end}${r ? c`<calcite-input-date-picker .value=${this.getDateStringFromBound(t)} scale=s placement=bottom-end @calciteInputDatePickerChange=${this.setGuideDateTimeRange} ${m(this.endDateCalciteInput)}></calcite-input-date-picker>` : c`<calcite-input type=number @calciteInputInput=${this.setGuideEnd} @keydown=${L} number-button-type=none .value=${t?.toString()} ${m(this.endCalciteInput)}></calcite-input>`}</calcite-label></div>${r ? X("time-picker-row", c`<div class=${o(n.row)}>${e != null ? c`<calcite-label class=${o(n.column)}><calcite-input-time-picker .value=${this.getTimeStringFromBound(e)} scale=s @calciteInputTimePickerChange=${this.setGuideDateTimeRange} ${m(this.startTimeCalciteInput)}></calcite-input-time-picker></calcite-label>` : null}${t != null ? c`<calcite-label class=${o(n.column)}><calcite-input-time-picker .value=${this.getTimeStringFromBound(t)} scale=s @calciteInputTimePickerChange=${this.setGuideDateTimeRange} ${m(this.endTimeCalciteInput)}></calcite-input-time-picker></calcite-label>` : null}</div>`) : null}<div class=${o(n.row)}><div class=${o(n.column)}>${this.renderColorElement()}</div></div><div class=${o(n.row)}><calcite-label class=${o(n.column)}>${this._messages.guideName}<calcite-input type=text .value=${i} @calciteInputInput=${this.setGuideName}></calcite-input></calcite-label></div><div class=${o(n.row)}><calcite-label class=${o(n.column)}>${this._messages.guideLabel}<calcite-input type=text .value=${a} @calciteInputInput=${this.setGuideLabel}></calcite-input></calcite-label></div><div class=${o(n.row)}><calcite-label class=${o(n.column)}>${this._messages.display}<calcite-segmented-control @calciteSegmentedControlChange=${this.setGuideRendered} scale=s><calcite-segmented-control-item .checked=${l} .value=${this._messages.inFront}>${this._messages.inFront}</calcite-segmented-control-item><calcite-segmented-control-item .checked=${!l} .value=${this._messages.inBack}>${this._messages.inBack}</calcite-segmented-control-item></calcite-segmented-control></calcite-label></div></calcite-block>`;
  }
}
B("arcgis-charts-config-guide", se);
export {
  se as ArcgisChartsConfigGuide
};
