import { c as X } from "../../chunks/runtime.js";
import { css as Y, html as b } from "lit";
import { LitElement as A, safeClassMap as l, safeStyleMap as _ } from "@arcgis/lumina";
import { s as z, g as I, p as w } from "../../chunks/utils2.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.34/esri/copyright.txt for details.
v4.34.7 */
const M = Y`.arcgis-spike-ramp__container{display:flex;flex-direction:row;gap:var(--calcite-spacing-sm-plus);margin-left:var(--calcite-spacing-sm)}.arcgis-spike-ramp__preview-container{display:flex;position:relative;gap:var(--calcite-spacing-sm-plus);border-bottom:var(--calcite-border-width-sm) solid var(--calcite-color-border-2);padding:0 var(--calcite-spacing-xl)}.arcgis-spike-ramp__preview{display:flex;gap:var(--calcite-spacing-sm-plus);align-items:end}.arcgis-spike-ramp__symbol-preview{display:flex}.arcgis-spike-ramp__lines{display:flex;position:absolute;bottom:0}.arcgis-spike-ramp__labels-container{display:flex;position:relative;top:-5px;flex:1;min-width:120px}.arcgis-spike-ramp__label{position:relative;padding:0 var(--calcite-spacing-sm);line-height:1em;word-break:break-all;font-size:var(--calcite-font-size-sm)}.arcgis-spike-ramp__label:before{display:block;position:absolute;top:.25em;right:100%;border-width:3px 4px 3px 0;border-style:solid;border-color:transparent var(--calcite-color-text-1) transparent transparent;width:0;height:0;content:""}`, n = {
  spikeRampContainer: "arcgis-spike-ramp__container",
  spikeRampPreviewContainer: "arcgis-spike-ramp__preview-container",
  spikeRampPreview: "arcgis-spike-ramp__preview",
  spikeRampSymbolPreview: "arcgis-spike-ramp__symbol-preview",
  spikeRampLines: "arcgis-spike-ramp__lines",
  spikeRampLabelsContainer: "arcgis-spike-ramp__labels-container",
  spikeRampLabel: "arcgis-spike-ramp__label"
}, j = "#ddd", e = window.devicePixelRatio;
function R(h) {
  return h.infos.filter((c, a) => a % 2 === 0);
}
function u(h) {
  return !!(h && typeof h == "object");
}
class N extends A {
  constructor() {
    super(...arguments), this.legendElement = null;
  }
  static {
    this.properties = { legendElement: 0, messages: 0 };
  }
  static {
    this.styles = M;
  }
  render() {
    return this.legendElement.infos.length !== 5 ? null : b`<div class=${l(n.spikeRampContainer)}><div class=${l(n.spikeRampPreviewContainer)}>${this._renderSpikeRampLines()}${this._renderSpikeRampPreview()}</div>${this._renderSpikeRampLabels()}</div>`;
  }
  _renderSpikeRampPreview() {
    const c = this.legendElement, [a, r, m] = R(c).map(({ preview: d, label: o }) => {
      if (!d)
        return null;
      const t = d.cloneNode(!0);
      return t.classList.add(n.spikeRampSymbolPreview), z(t, I(this.messages, o)), t;
    });
    return !a || !r || !m ? null : b`<div class=${l(n.spikeRampPreview)}><div>${m}</div><div>${r}</div><div>${a}</div></div>`;
  }
  _renderSpikeRampLines() {
    const c = this.legendElement, [{ width: a, height: r }, { width: m }, { width: d, height: o }] = R(c).map(({ size: k }) => u(k) ? { width: w(k.width), height: w(k.height) } : { width: 0, height: 0 }), t = 10, g = 8, p = a + m + d + t * 3, v = r, s = document.createElement("canvas");
    s.width = (p + t) * e, s.height = v * e, s.style.width = `${s.width / e}px`, s.style.height = `${s.height / e}px`;
    const i = s.getContext("2d");
    i.beginPath();
    const f = p - (a / 2 + t), x = 0, $ = p + g, y = 0;
    i.moveTo(f * e, x * e), i.lineTo($ * e, y * e);
    const L = (p - g) / 2, P = (r - o) / 2, S = p + g, E = (r - o) / 2;
    i.moveTo(L * e, P * e), i.lineTo(S * e, E * e);
    const C = d / 2, H = v - o, T = p + g, W = v - o;
    return i.moveTo(C * e, H * e), i.lineTo(T * e, W * e), i.strokeStyle = j, i.lineWidth = 0.5 * e, i.stroke(), b`<div class=${l(n.spikeRampLines)}>${s}</div>`;
  }
  _renderSpikeRampLabels() {
    const c = this.legendElement, [{ label: a, height: r }, { label: m }, { label: d, height: o }] = R(c).map(({ label: s, size: i }) => ({
      label: s,
      height: u(i) ? w(i.height) : 0
    })), t = r - o, g = { position: "absolute", top: "0" }, p = { position: "absolute", top: `${t / 2}px` }, v = { position: "absolute", top: `${t}px` };
    return b`<div class=${l(n.spikeRampLabelsContainer)}><div class=${l(n.spikeRampLabel)} style=${_(g)}>${a}</div><div class=${l(n.spikeRampLabel)} style=${_(p)}>${m}</div><div class=${l(n.spikeRampLabel)} style=${_(v)}>${d}</div></div>`;
  }
}
X("arcgis-legend-spike-ramp", N);
export {
  N as ArcgisLegendSpikeRamp
};
