/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c } from "../../chunks/runtime.js";
import { css as l, html as a } from "lit";
import "@arcgis/toolkit/intl";
import "lodash-es";
import "luxon";
import "d3-array";
import "@arcgis/toolkit/type";
import "../../chunks/series-types.js";
import "../../chunks/index.js";
import "@arcgis/core/Graphic.js";
import "@arcgis/core/renderers/support/jsonUtils.js";
import "@arcgis/core/symbols/support/symbolUtils.js";
import "@esri/arcgis-html-sanitizer";
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 r } from "../../chunks/popover-ui-utils.js";
import { a as p } from "../../chunks/chart-ui-utils2.js";
import { u as n } from "../../chunks/useT9n.js";
import { createRef as h, ref as m } from "lit/directives/ref.js";
import { LitElement as d, createEvent as s, safeClassMap as o } from "@arcgis/lumina";
import { M as e } from "../../chunks/common.js";
const i = {
  selectChartComponent: "select-chart-component",
  jsAppFlyout: "js-app-flyout",
  panel: "panel"
}, g = l`.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)}.select-chart-component{width:var(--arcgis-charts-config-panel-width);height:var(--arcgis-charts-config-panel-height)}calcite-block{width:var(--arcgis-charts-config-calcite-block-default-width);height:var(--arcgis-charts-config-calcite-block-default-height);margin:var(--arcgis-charts-config-calcite-block-default-margin)}.label{display:flex;margin-left:1rem;margin-bottom:.5rem;justify-content:space-between}.header{margin:0}.panel{max-height:60vh}`;
class C extends d {
  constructor() {
    super(...arguments), this._messages = n(), this.selectChartTypePopover = h(), this.arcgisChartsConfigPopoverClose = s(), this.arcgisChartsConfigSelectChartTypeChange = s();
  }
  static {
    this.properties = { messageOverrides: 0, headerTitle: 1, layerId: 1, open: 5, referenceElement: 0, popoverPlacement: 1, selectedModelType: 1 };
  }
  static {
    this.styles = g;
  }
  async reposition() {
    await this.selectChartTypePopover.value?.reposition();
  }
  updated() {
    r(this.selectChartTypePopover.value, this.open), this.hasUpdated || setTimeout(() => {
      this.selectChartTypePopover.value?.reposition();
    }, p.PopoverTimer);
  }
  buildChartTypesList() {
    return a`<calcite-list label @click=${this.onChartTypeClick}><calcite-list-item .label=${this._messages.barChart} .value=${e.BarChart} .selected=${this.selectedModelType === e.BarChart}><calcite-icon slot=content-start icon=graph-bar></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.lineChart} .value=${e.LineChart} .selected=${this.selectedModelType === e.LineChart}><calcite-icon slot=content-start icon=graph-time-series></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.pieChart} .value=${e.PieChart} .selected=${this.selectedModelType === e.PieChart}><calcite-icon slot=content-start icon=pie-chart></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.histogram} .value=${e.Histogram} .selected=${this.selectedModelType === e.Histogram}><calcite-icon slot=content-start icon=graph-histogram></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.scatterplot} .value=${e.Scatterplot} .selected=${this.selectedModelType === e.Scatterplot}><calcite-icon slot=content-start icon=graph-scatter-plot></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.boxPlot} .value=${e.BoxPlot} .selected=${this.selectedModelType === e.BoxPlot}><calcite-icon slot=content-start icon=box-chart></calcite-icon></calcite-list-item><calcite-list-item .label=${this._messages.calendarHeatChart} .value=${e.HeatChart} .selected=${this.selectedModelType === e.HeatChart}><calcite-icon slot=content-start icon=calendar-heat-chart></calcite-icon></calcite-list-item></calcite-list>`;
  }
  onChartTypeClick(t) {
    t.target?.localName === "calcite-list-item" ? this.selectedModelType = t.target?.value : this.selectedModelType = t.target?.parentNode?.value, this.arcgisChartsConfigSelectChartTypeChange.emit();
  }
  popoverOpen() {
    setTimeout(() => {
      this.selectChartTypePopover.value?.setFocus();
    }, 250);
  }
  popoverClose() {
    this.open = !1, this.arcgisChartsConfigPopoverClose.emit(), setTimeout(() => {
      this.referenceElement?.setFocus();
    }, 250);
  }
  render() {
    return a`<div class=${o({
      [i.selectChartComponent]: !0,
      [i.jsAppFlyout]: !0
    })}><calcite-popover .referenceElement=${this.referenceElement ?? document.body} .placement=${this.popoverPlacement} .flipPlacements=${["top", "bottom"]} @calcitePopoverOpen=${this.popoverOpen} @calcitePopoverClose=${this.popoverClose} .open=${this.open} auto-close label ${m(this.selectChartTypePopover)}><calcite-panel class=${o(i.panel)} .heading=${this.headerTitle ?? this._messages.chooseChartType} closable @calcitePanelClose=${this.popoverClose} .closed=${!this.open}>${this.buildChartTypesList()}</calcite-panel></calcite-popover></div>`;
  }
}
c("arcgis-charts-config-select-chart-type-popover", C);
export {
  C as ArcgisChartsConfigSelectChartTypePopover
};
