/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
import { c as C } from "../../chunks/runtime.js";
import { css as P, html as X } from "lit";
import { LitElement as j, safeStyleMap as v, safeClassMap as Y } from "@arcgis/lumina";
import { s as k, g as I, p as R } from "../../chunks/utils2.js";
const A = P`.size-ramp-container{display:flex;align-items:center;justify-content:center}.size-ramp-vertical-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.size-ramp-label{margin:0 .5em;white-space:nowrap}.size-ramp-vertical-ramp{display:flex;flex-direction:column;align-items:center}.size-ramp-ramp{display:flex;flex-direction:row-reverse;align-items:center}.size-ramp-preview{display:flex}`, M = "#ddd";
function N(e) {
  if (!e)
    return;
  if (e.type.includes("3d")) {
    if (!("symbolLayers" in e) || !e.symbolLayers?.length)
      return;
    const t = e.symbolLayers.at(-1), s = t && "resource" in t ? t.resource?.primitive : void 0;
    return s === "circle" || s === "cross" || s === "kite" || s === "sphere" || s === "cube" || s === "diamond";
  }
  const r = "style" in e ? e.style : void 0;
  return r === "circle" || r === "diamond" || r === "cross";
}
function O(e) {
  if (e) {
    if (e.type.includes("3d")) {
      if (!("symbolLayers" in e) || !e.symbolLayers?.length)
        return;
      const r = e.symbolLayers.at(-1), t = r && "resource" in r ? r.resource?.primitive : void 0;
      return t === "triangle" || t === "cone" || t === "tetrahedron";
    }
    return "style" in e && e.style === "triangle";
  }
}
class _ extends j {
  constructor() {
    super(...arguments), this.hasIndicators = !1, this.legendElement = null, this.opacity = 1;
  }
  static {
    this.properties = { hasIndicators: 5, legendElement: 0, opacity: 9, messages: 0 };
  }
  static {
    this.styles = A;
  }
  render() {
    if (this.legendElement.theme === "spike")
      return X`<div style=${v({ display: "flex", flex: "1", justifyContent: "center" })}><arcgis-legend-spike-ramp .legendElement=${this.legendElement} .messages=${this.messages}></arcgis-legend-spike-ramp></div>`;
    const { legendElement: r, hasIndicators: t, opacity: s } = this, l = r.infos, d = l.at(0), p = l.at(-1);
    if (!d || !p)
      return null;
    const { label: g, ...y } = d, { label: f, ...z } = p;
    let n = y.preview, i = z.preview;
    if (!n || !i)
      return null;
    n = n.cloneNode(!0), n.style.display = "flex", k(n, I(this.messages, g)), i = i.cloneNode(!0), i.style.display = "flex", k(i, I(this.messages, f));
    const a = { opacity: `${s ?? ""}` };
    return X`<div class=${Y(t ? "size-ramp-vertical-container" : "size-ramp-container")}><div class="size-ramp-label">${t ? g : f}</div><div class=${Y(t ? "size-ramp-vertical-ramp" : "size-ramp-ramp")}><div class="size-ramp-preview" style=${v(a)}>${n}</div>${this._renderSizeRampLines(r)}<div class="size-ramp-preview" style=${v(a)}>${i}</div></div><div class="size-ramp-label">${t ? f : g}</div></div>`;
  }
  _renderSizeRampLines(r) {
    const t = r.infos, s = t.at(0), l = t.at(-1);
    if (!s || !l)
      return null;
    const d = s.symbol, p = this.hasIndicators, g = s.size && typeof s.size == "number" ? s.size : 0, y = l.size && typeof l.size == "number" ? l.size : 0, f = s.outlineSize || 0, z = l.outlineSize || 0, n = R(g + f), i = R(y + z), a = p ? n : n + 50, m = p ? n / 2 + 50 : n, u = O(d), h = N(d), c = document.createElement("canvas");
    c.width = a, c.height = m, c.style.width = `${c.width}px`, c.style.height = `${c.height}px`;
    const o = c.getContext("2d");
    if (p) {
      o.beginPath();
      const S = 0, x = 0, $ = a / 2 - i / 2, b = m;
      o.moveTo(S, x), o.lineTo($, b);
      const L = a, w = 0, T = a / 2 + i / 2, E = m;
      o.moveTo(L, w), o.lineTo(T, E);
    } else {
      o.beginPath();
      const S = 0, x = m / 2 - i / 2, $ = a, b = 0;
      o.moveTo(S, x), o.lineTo($, b);
      const L = 0, w = m / 2 + i / 2, T = a, E = m;
      o.moveTo(L, w), o.lineTo(T, E);
    }
    return o.strokeStyle = M, o.stroke(), X`<div style=${v(p ? {
      display: "flex",
      marginTop: `-${u ? 0 : h ? n / 2 : 0}px`,
      marginBottom: `-${u ? i : h ? i / 2 : 0}px`
    } : {
      display: "flex",
      marginRight: `-${u ? 0 : h ? n / 2 : 0}px`,
      marginLeft: `-${u ? 0 : h ? i / 2 : 0}px`
    })}>${c}</div>`;
  }
}
C("arcgis-legend-card-size-ramp", _);
export {
  _ as LegendCardSizeRamp
};
