/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as w } from "../../chunks/runtime.js";
import { repeat as d } from "lit/directives/repeat.js";
import { css as F, html as l } from "lit";
import { keyed as f } from "lit/directives/keyed.js";
import L from "@arcgis/core/Color.js";
import { LitElement as P, createEvent as h, safeClassMap as r, nothing as g, safeStyleMap as S } from "@arcgis/lumina";
import { createRef as u, ref as p } from "lit/directives/ref.js";
import { isEqual as A } from "lodash-es";
import { by as D, d3 as E, bT as _, bS as N, ds as b, ar as B } from "../../chunks/index.js";
import { u as v } from "../../chunks/useT9n.js";
import { d as c, W as $ } from "../../chunks/interfaces.js";
import "@arcgis/toolkit/type";
import { a as M, u as y, v as C } from "../../chunks/series-types.js";
import { R as H } from "../../chunks/rest-js-object-literals.js";
import "@arcgis/toolkit/intl";
import "luxon";
import "d3-array";
import "@arcgis/core/Graphic.js";
import "@arcgis/core/renderers/support/jsonUtils.js";
import "@arcgis/core/symbols/support/symbolUtils.js";
import "@arcgis/core/intl.js";
import "@arcgis/core/layers/support/FeatureFilter.js";
import "@arcgis/core/smartMapping/statistics/histogram.js";
import "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
import "simple-statistics";
import "@arcgis/core/request.js";
import "@arcgis/core/core/sql.js";
import "@arcgis/core/AttributeBinsGraphic.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/toolkit/dom";
import { e as O } from "../../chunks/popover-ui-utils.js";
import { b as x, a as k, c as m } from "../../chunks/chart-ui-utils2.js";
import { C as R, e as T } from "../../chunks/class-breaks.js";
const j = F`.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)}.name{display:flex;flex-direction:column;margin:.5rem;padding:.5rem;background:#fff;min-width:250px}.header{margin:0;font-weight:bolder}.pick-list-item-label{font-size:small}.panel{max-height:60vh}.color-ramp-popover{display:flex;flex-direction:column;gap:.75rem;min-width:320px;max-width:480px}.color-ramp-toolbar{display:flex;gap:.5rem;align-items:center;padding:5px 5px 0}.ramp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.5rem;max-height:300px;overflow:auto;padding:.25rem}.ramp-item{display:flex;flex-direction:column;border:1px solid var(--calcite-color-foreground-3);background:var(--calcite-color-foreground-1);cursor:pointer;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .12s;border-radius:2px;min-height:56px;padding:4px}.ramp-item:hover{box-shadow:inset 0 0 0 1px var(--calcite-color-foreground-3)}.ramp-name{font-size:.625rem;line-height:1;padding:2px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-color-text-3)}.ramp-item.selected{background-color:var(--calcite-color-brand)!important;border-color:var(--calcite-color-brand)!important;outline:2px solid var(--calcite-color-brand)!important;color:var(--calcite-color-foreground-1)}.ramp-item.selected .ramp-name{color:var(--calcite-color-foreground-1)}.ramp-item.selected .ramp-strip{box-shadow:none;border:none}.ramp-strips{display:flex;flex:1;height:28px;width:100%;overflow:hidden}.ramp-strip{flex:1;min-width:0}.ramp-strip-fallback{background:repeating-linear-gradient(45deg,var(--calcite-color-foreground-3) 0,var(--calcite-color-foreground-3) 5px,var(--calcite-color-foreground-2) 5px,var(--calcite-color-foreground-2) 10px)}.ramp-empty{grid-column:1/-1;font-size:.75rem;color:var(--calcite-color-text-3)}.panel-children-container{display:flex;padding:0 1rem;margin-top:1rem}.panel-children-container calcite-label{flex:1 1 0px;display:flex;width:0px}.color-ramp-popover-footer{display:flex;padding:.5rem}.color-ramp-popover-footer calcite-button{flex:1}`, s = {
  jsAppFlyout: "js-app-flyout",
  name: "bar-chart-data-popover",
  header: "header",
  pickListItemLabel: "pick-list-item-label",
  panel: "panel",
  colorRampPopover: "color-ramp-popover",
  colorRampToolbar: "color-ramp-toolbar",
  rampGrid: "ramp-grid",
  rampItem: "ramp-item",
  rampName: "ramp-name",
  rampStrips: "ramp-strips",
  rampStrip: "ramp-strip",
  rampStripFallback: "ramp-strip-fallback",
  rampEmpty: "ramp-empty",
  panelChildrenContainer: "panel-children-container",
  colorRampPopoverFooter: "color-ramp-popover-footer"
};
class q extends P {
  constructor() {
    super(...arguments), this._messages = v(), this.commonStrings = v({ name: "common", blocking: !0 }), this.picklist = u(), this.popoverElement = u(), this.placement = "leading", this.offsetDistance = -200, this.availableColorRamps = [], this.selectedCategory = R.all, this.aggregationLabels = [], this.isFlipped = !1, this.layerFieldsInfo = [], this.arcgisChartsConfigHeatChartColorRampChange = h(), this.arcgisChartsConfigHeatChartDataPopoverChange = h(), this.arcgisChartsConfigPopoverClose = h(), this.arcgisChartsConfigPopoverEmptyCellColorChange = h(), this.arcgisChartsConfigPopoverEmptyCellNameChange = h();
  }
  static {
    this.properties = { availableColorRamps: 16, selectedColorRampName: 16, selectedCategory: 16, aggregationLabels: 16, isFlipped: 5, model: 0, messageOverrides: 0, headingTitle: 1, referenceElement: 0, open: 5, contentKind: 1, layerFieldsInfo: 0, selectedContent: 1, colorRamps: 0 };
  }
  static {
    this.styles = j;
  }
  async reposition() {
    await this.popoverElement.value?.reposition();
  }
  willUpdate() {
    const e = x.map((t) => D(t, this.commonStrings));
    A(this.aggregationLabels, e) || (this.aggregationLabels = e), this.colorRamps && this.colorRamps !== this.availableColorRamps && (this.availableColorRamps = this.colorRamps), this.contentKind === c.colorScheme && this.selectedContent && !this.selectedColorRampName && (this.selectedColorRampName = this.selectedContent);
  }
  updated() {
    setTimeout(() => {
      this.picklist.value?.setFocus();
    }, k.PopoverTimer), O(this.popoverElement.value, this.open), this.hasUpdated || setTimeout(() => {
      this.popoverElement.value?.reposition();
    }, k.PopoverTimer);
  }
  buildAggregationListItems() {
    return d(x.filter((e) => e !== M.NoAggregation), (e) => e, (e, t) => l`<calcite-list-item .label=${this.aggregationLabels[t]} .value=${e} .selected=${m(e, this.selectedContent)}></calcite-list-item>`);
  }
  buildPickListItem(e) {
    return f(e.name, l`<calcite-list-item .label=${E(this.layerFieldsInfo, e.name)} .value=${e.name} .selected=${m(e.name, this.selectedContent)}></calcite-list-item>`);
  }
  buildPickListItems(e) {
    const t = this.layerFieldsInfo?.length ?? 0, a = [];
    switch (e) {
      case c.numericFields: {
        const i = f(" ", l`<calcite-list-item label=" " value=" " .selected=${m("", this.selectedContent)}></calcite-list-item>`);
        a.push(i);
        for (let o = 0; o < t; o += 1) {
          const n = this.layerFieldsInfo?.[o];
          n && N(n) && a.push(this.buildPickListItem(n));
        }
        break;
      }
      case c.xAxisField: {
        for (let i = 0; i < t; i += 1) {
          const o = this.layerFieldsInfo?.[i];
          o && _(o) && a.push(this.buildPickListItem(o));
        }
        break;
      }
    }
    return a;
  }
  closePopover() {
    this.open = !1, this.arcgisChartsConfigPopoverClose.emit();
  }
  onDataContentTypeChange(e) {
    const t = e.target.selectedItems;
    this.arcgisChartsConfigHeatChartDataPopoverChange.emit({
      contentKind: this.contentKind,
      // TODO: check this logic
      value: t.map((a) => a.value)[0]
    }), this.open = !1;
  }
  filterColorRamps() {
    let e = [];
    if (this.selectedCategory === R.all)
      e = this.availableColorRamps;
    else {
      const t = T[this.selectedCategory];
      e = this.availableColorRamps?.filter((a) => t.some((i) => a.tags.includes(i)));
    }
    return e;
  }
  getRampColors(e) {
    const t = e.colors;
    return this.isFlipped ? [...t].reverse() : t;
  }
  rampColorToCss(e) {
    let t = "#000000";
    try {
      if (e) {
        if (e instanceof L) {
          const a = e.toHex();
          typeof a == "string" && a.length && (t = a);
        } else if (Array.isArray(e)) {
          const [a, i, o, n] = e;
          [a, i, o].every((I) => typeof I == "number") && (t = `rgba(${a},${i},${o},${n ?? 1})`);
        } else if (typeof e == "object" && e) {
          const { r: a, g: i, b: o, a: n } = e;
          if (a != null && i != null && o != null)
            return `rgba(${a},${i},${o},${n ?? 1})`;
        }
      }
    } catch {
    }
    return t;
  }
  onCategoryDropdownSelect(e) {
    const i = e.target.selectedItems[0]?.getAttribute("data-tag");
    i && (this.selectedCategory = i);
  }
  onFlipAll() {
    if (this.isFlipped = !this.isFlipped, this.selectedColorRampName) {
      const e = this.availableColorRamps.find((t) => t.name === this.selectedColorRampName);
      if (e) {
        const t = {
          ...e,
          colors: this.getRampColors(e)
        };
        this.arcgisChartsConfigHeatChartColorRampChange.emit({
          rampName: e.name,
          ramp: t,
          isFlipped: this.isFlipped
        });
      }
    }
  }
  onRampSelect(e) {
    this.selectedColorRampName = e.name;
    const t = { ...e, colors: this.getRampColors(e) };
    this.arcgisChartsConfigHeatChartColorRampChange.emit({
      rampName: e.name,
      ramp: t,
      isFlipped: this.isFlipped
    });
  }
  nameChange(e) {
    const t = e.target.value;
    this.model.emptyCellText !== t && (this.model.emptyCellText = t, this.arcgisChartsConfigPopoverEmptyCellNameChange.emit({ name: t }));
  }
  colorChange(e) {
    const t = e instanceof CustomEvent ? e.detail : e, [a, i, o] = t, n = B * 255;
    this.arcgisChartsConfigPopoverEmptyCellColorChange.emit({ color: [a, i, o, n] });
  }
  renderAggregationType() {
    const e = this.buildAggregationListItems();
    return l`<calcite-list label class=${r(s.pickListItemLabel)} selection-mode=single selection-appearance=border @calciteListChange=${this.onDataContentTypeChange}>${e}</calcite-list>`;
  }
  renderXAxisFieldSelect() {
    const e = this.buildPickListItems(c.xAxisField);
    return l`<calcite-list label class=${r(s.pickListItemLabel)} selection-mode=single selection-appearance=border filter-enabled @calciteListChange=${this.onDataContentTypeChange} ${p(this.picklist)}>${e}</calcite-list>`;
  }
  renderNumericFields() {
    const e = this.buildPickListItems(c.numericFields);
    return l`<calcite-list label class=${r(s.pickListItemLabel)} selection-mode=single filter-enabled selection-appearance=border @calciteListChange=${this.onDataContentTypeChange} ${p(this.picklist)}>${e}</calcite-list>`;
  }
  renderCalendarType() {
    const e = this.layerFieldsInfo.find((i) => i.name === this.model.xAxisField), t = Object.values($).filter((i) => i !== $.WeekByDayOfWeekAndHourOfDay || e?.type !== H.DateOnly), a = d(t, (i) => i, (i) => {
      const o = this._messages[i];
      return l`<calcite-list-item .label=${o} .value=${i} .selected=${m(i, this.selectedContent)}></calcite-list-item>`;
    });
    return l`<calcite-list label class=${r(s.pickListItemLabel)} selection-mode=single filter-enabled selection-appearance=border @calciteListChange=${this.onDataContentTypeChange} ${p(this.picklist)}>${a}</calcite-list>`;
  }
  renderCalendarViewType() {
    const e = d(Object.values(y), (t) => t, (t) => {
      const a = this._messages[t];
      return l`<calcite-list-item .label=${a} .value=${t} .disabled=${t !== y.singleCalendarView} .selected=${m(t, this.selectedContent)}></calcite-list-item>`;
    });
    return l`<calcite-list label class=${r(s.pickListItemLabel)} selection-mode=single filter-enabled selection-appearance=border @calciteListChange=${this.onDataContentTypeChange} ${p(this.picklist)}>${e}</calcite-list>`;
  }
  renderClassBreakMethod() {
    const e = [
      {
        value: C.naturalBreaks,
        title: this._messages?.classBreaksMethod?.naturalBreaks,
        msg: this._messages?.classBreaksMethod?.naturalBreaksMsg
      },
      {
        value: C.equalInterval,
        title: this._messages?.classBreaksMethod?.equalInterval,
        msg: this._messages?.classBreaksMethod?.equalIntervalMsg
      },
      {
        value: C.quantile,
        title: this._messages?.classBreaksMethod?.quantile,
        msg: this._messages?.classBreaksMethod?.quantileMsg
      }
    ], t = d(Object.values(e), ({ value: a }) => a, (a) => {
      const { title: i, msg: o, value: n } = a;
      return l`<calcite-list-item .label=${i} .description=${o} .value=${n} .selected=${m(n, this.selectedContent)}></calcite-list-item>`;
    });
    return l`<calcite-list label class=${r(s.pickListItemLabel)} selection-mode=single filter-enabled selection-appearance=border @calciteListChange=${this.onDataContentTypeChange} ${p(this.picklist)}>${t}</calcite-list>`;
  }
  renderPopoverInfo() {
    let e;
    switch (this.contentKind) {
      case c.aggregation:
        e = this.renderAggregationType();
        break;
      case c.numericFields:
        e = this.renderNumericFields();
        break;
      case c.xAxisField:
        e = this.renderXAxisFieldSelect();
        break;
      case c.calendarType:
        e = this.renderCalendarType();
        break;
      case c.calendarViewType:
        e = this.renderCalendarViewType();
        break;
      case c.classBreakMethod:
        e = this.renderClassBreakMethod();
        break;
      case c.colorScheme:
        e = this.renderColorRampSelect();
        break;
      case c.null:
        e = this.renderEmptyCellUI();
        break;
      default:
        e = l`<div></div>`;
        break;
    }
    return e;
  }
  renderColorRampSelect() {
    const e = this.filterColorRamps(), t = this._messages?.colorRampCategories ? this._messages.colorRampCategories[this.selectedCategory] : this.selectedCategory;
    return l`<div class=${r(s.colorRampPopover)}><div class=${r(s.colorRampToolbar)}><calcite-dropdown selection-mode=single placement=bottom-start @calciteDropdownSelect=${this.onCategoryDropdownSelect}><calcite-button slot=trigger appearance=outline icon-end=chevron-down>${t}</calcite-button><calcite-dropdown-group group-title=${this._messages?.colorRamp?.allCategories ?? "All color ramps" ?? g}>${Object.keys(T).map((a) => l`<calcite-dropdown-item data-tag=${a ?? g} .selected=${this.selectedCategory === a}>${this._messages?.colorRampCategories ? this._messages.colorRampCategories[a] : a}</calcite-dropdown-item>`)}</calcite-dropdown-group></calcite-dropdown><calcite-button appearance=outline icon-start=arrow-up-down @click=${this.onFlipAll}>${this._messages?.colorRamp?.flipRampColors}</calcite-button></div><div class=${r(s.rampGrid)}>${e.length === 0 && l`<div class=${r(s.rampEmpty)}>${this._messages?.colorRamp?.noRamps} ${this.selectedCategory !== "all" ? `"${this.selectedCategory}"` : ""}</div>` || ""}${e.map((a) => {
      const i = this.getRampColors(a), o = a.name === this.selectedColorRampName;
      return l`<div class=${`${s.rampItem} ${o ? "selected" : ""}`} title=${a.name ?? g} @click=${() => this.onRampSelect(a)}><div class=${r(s.rampName)} aria-hidden=true>${a.name}</div><div class=${r(s.rampStrips)}>${d(i, (n) => n, (n) => l`<div class=${r(s.rampStrip)} style=${S({ backgroundColor: this.rampColorToCss(n) })}></div>`)}${i.length === 0 && l`<div class=${`${s.rampStrip} ${s.rampStripFallback}`}></div>` || ""}</div></div>`;
    })}</div><div class=${r(s.colorRampPopoverFooter)}><calcite-button appearance=solid kind=brand @click=${this.closePopover}>${this._messages?.colorRamp?.done}</calcite-button></div></div>`;
  }
  renderEmptyCellUI() {
    const e = this.model.emptyCellSymbol?.color ?? b.grayColor, t = this.model.emptyCellText ?? b.nullCategory?.text ?? "";
    return l`<div><div class=${r(s.panelChildrenContainer)}><calcite-label>${this._messages.label}<calcite-input type=text .value=${t} @calciteInputInput=${this.nameChange}></calcite-input></calcite-label></div><div class=${r(s.panelChildrenContainer)}><arcgis-charts-config-colors .heading=${this._messages?.symbolColor} .rgba=${e} @arcgisColorSelect=${this.colorChange}></arcgis-charts-config-colors></div></div>`;
  }
  render() {
    return l`<div class=${r(s.jsAppFlyout)}><calcite-popover class=${r(s.name)} .referenceElement=${this.referenceElement ?? document.body} .placement=${this.placement} .offsetDistance=${this.offsetDistance} .open=${this.open} @calcitePopoverClose=${this.closePopover} label auto-close ${p(this.popoverElement)}><calcite-panel class=${r(s.panel)} closable .closed=${!this.open} @calcitePanelClose=${this.closePopover}><div slot=header-content class=${r(s.header)}>${this.headingTitle ?? ""}</div>${this.renderPopoverInfo()}${void 0}</calcite-panel></calcite-popover></div>`;
  }
}
w("arcgis-charts-config-heat-chart-popover", q);
export {
  q as ArcgisChartsConfigHeatChartPopover
};
