/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
import { c as l } from "../../chunks/runtime.js";
import { css as a, html as i } from "lit";
import { watch as c } from "@arcgis/core/core/reactiveUtils.js";
import { substitute as o } from "@arcgis/core/intl.js";
import { LitElement as d } from "@arcgis/lumina";
import { classes as h } from "@arcgis/toolkit/dom";
import { H as g } from "../../chunks/heading.js";
import { g as m } from "../../chunks/globalCss.js";
const f = a`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}:host{display:flex;flex-direction:row;position:relative;transition:max-width .25s ease-in-out;overflow-x:auto}calcite-carousel-item[selected]{flex:1;overflow:auto}.message{padding:.5em 1em}.service-caption-text{margin:0}.service-content{display:flex;flex:1}.service-content>arcgis-legend-card-element:not(:first-child){border-left:1px solid var(--calcite-color-border-2)}.service{border-left:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);min-width:fit-content;display:flex;flex-direction:column;flex:1}.service-caption-container{border-bottom:1px solid var(--calcite-color-border-2);padding:var(--calcite-spacing-md)}`, u = 768;
class v extends d {
  constructor() {
    super(...arguments), this.stacked = !1, this.headingLevel = 3, this.layout = "auto", this.type = "card";
  }
  static {
    this.properties = { stacked: 16, activeLayerInfos: 0, headingLevel: 9, messages: 0, view: 0, layout: 1, type: 32 };
  }
  static {
    this.styles = f;
  }
  loaded() {
    this.manager.onLifecycle(() => [
      c(() => [this.layout, this.view.width], () => {
        this.stacked = this.layout === "stack" || (!this.layout || this.layout === "auto") && this.view.width <= u;
      }, { initial: !0 })
    ]);
  }
  render() {
    return (this.stacked ? this._renderCarousel() : this._renderLayers()) || i`<div class="message">${this.messages.noLegend}</div>`;
  }
  _renderTitle(e) {
    return i`<div class="service-caption-container">${g({ class: h("service-caption-text", m.heading), level: this.headingLevel, children: e })}</div>`;
  }
  _renderCarousel() {
    const e = [], t = this.activeLayerInfos;
    if (t)
      for (const s of t)
        this._renderSections(s, e);
    return e?.length ? i`<calcite-carousel .paginationDisabled=${e.length < 2} .label=${this.messages.carousel ?? ""}>${e.map((s, r) => i`<calcite-carousel-item .label=${o(this.messages?.pagination?.pageText ?? "", {
      index: r + 1,
      total: e.length
    })}>${s}</calcite-carousel-item>`)}</calcite-carousel>` : null;
  }
  _renderLayers() {
    const t = this.activeLayerInfos?.toArray()?.map((s) => this._renderLegendForLayer(s)).filter(Boolean);
    return t?.length ? t : null;
  }
  _renderLegendForLayer(e) {
    if (!e.ready)
      return null;
    if (e.children.length) {
      const t = e.children.toArray().map(this._renderLegendForLayer, this);
      return i`<section class="service">${this._renderTitle(e.title)}<div class="service-content">${t}</div></section>`;
    }
    return this._renderLegendElementsForLayer(e);
  }
  _renderLegendElementsForLayer(e) {
    const t = e.legendElements?.filter(Boolean);
    if (!t?.length)
      return null;
    const s = t.map((r) => i`<arcgis-legend-card-element .activeLayerInfo=${e} .cssEffectFilter=${e.cssEffectFilter ?? void 0} .stacked=${this.stacked} .headingLevel=${this.headingLevel} .layer=${e.layer} .legendElement=${r} .messages=${this.messages}></arcgis-legend-card-element>`);
    return i`<section class="service">${this._renderTitle(e.title)}<div class="service-content">${s}</div></section>`;
  }
  _renderSections(e, t) {
    if (!e.ready)
      return;
    if (e.children.length)
      for (const r of e.children)
        this._renderSections(r, t);
    const s = e.legendElements;
    if (s?.length)
      for (const r of s) {
        const n = i`<arcgis-legend-card-element .activeLayerInfo=${e} .cssEffectFilter=${e.cssEffectFilter ?? void 0} .stacked=${this.stacked} .headingLevel=${this.headingLevel} .layer=${e.layer} .legendElement=${r} .messages=${this.messages}></arcgis-legend-card-element>`;
        n && t.push(n);
      }
  }
}
l("arcgis-legend-card-view", v);
export {
  v as LegendCardView
};
