import {
  __decorateClass,
  __privateAdd,
  __privateGet,
  __privateMethod,
  __privateSet
} from "../../chunks/chunk.QU3DSPNU.js";
var _handleChipClick, _collapseThreshold, _collapsedAt, _GdsFilterChips_instances, getChipHeight_fn, handleSlotChange_fn;
import { property, query, state } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { resizeObserver } from "../../utils/decorators/resize-observer.js";
import { watch } from "../../utils/decorators/watch.js";
import { stringArrayConverter } from "../../utils/helpers/attribute-converters.js";
import {
  gdsCustomElement,
  html
} from "../../utils/helpers/custom-element-scoping.js";
import { GdsFormControlElement } from "../form/form-control.js";
import { GdsFilterChip } from "./filter-chip/filter-chip.component.js";
import FilterChipsStyles from "./filter-chips.styles.js";
let GdsFilterChips = class extends GdsFormControlElement {
  constructor() {
    super(...arguments);
    __privateAdd(this, _GdsFilterChips_instances);
    this.multiple = false;
    this.label = "";
    this.rowCollapse = false;
    this._collapsed = false;
    __privateAdd(this, _handleChipClick, (event) => {
      const clickedChip = this.chips.find(
        (s) => s === event.target || s.contains(event.target)
      );
      if (clickedChip) {
        if (this.multiple && Array.isArray(this.value)) {
          if (clickedChip.selected) {
            this.value = this.value.filter(
              (v) => v !== clickedChip.value
            );
          } else {
            this.value = [...this.value, clickedChip.value];
          }
        } else {
          this.value = clickedChip.value === this.value ? void 0 : clickedChip.value;
        }
        this.dispatchCustomEvent("change", {
          detail: { clickedChip, value: this.value },
          bubbles: true,
          composed: true
        });
      }
    });
    __privateAdd(this, _collapseThreshold, 3);
    __privateAdd(this, _collapsedAt, 0);
  }
  get value() {
    return this._internalValue;
  }
  set value(value) {
    this._internalValue = value;
  }
  /**
   * Returns the chips in the control
   * @readonly
   */
  get chips() {
    return this._elSlot ? this._elSlot.assignedElements() : [];
  }
  render() {
    const layoutClasses = {
      collapse: this._collapsed
    };
    return html`<div
      class="chips ${classMap(layoutClasses)}"
      role="listbox"
      aria-label=${this.label}
      aria-multiselectable=${this.multiple}
    >
      <slot
        @click=${__privateGet(this, _handleChipClick)}
        @slotchange=${__privateMethod(this, _GdsFilterChips_instances, handleSlotChange_fn)}
        role="none"
      ></slot>
    </div>`;
  }
  focus(options) {
    this.chips[0]?.focus(options);
  }
  _getValidityAnchor() {
    return this.shadowRoot?.querySelector("div");
  }
  _handleResize() {
    if (!this.rowCollapse) return;
    const chipHeight = __privateMethod(this, _GdsFilterChips_instances, getChipHeight_fn).call(this);
    const selfHeight = this.offsetHeight;
    const selfWidth = this.offsetWidth;
    if (selfHeight >= chipHeight * __privateGet(this, _collapseThreshold)) {
      this._collapsed = true;
      __privateSet(this, _collapsedAt, selfWidth);
    }
    if (selfWidth > __privateGet(this, _collapsedAt)) {
      this._collapsed = false;
    }
  }
  _updateSelectedFromValue() {
    if (this.multiple && !Array.isArray(this.value)) {
      this.value = [this.value];
    }
    if (!this.multiple && Array.isArray(this.value)) {
      this.value = this.value[0];
    }
    this.updateComplete.then(() => {
      this.chips.forEach((chip) => {
        chip.selected = this.multiple ? this.value.includes(chip.value) : this.value === chip.value;
      });
    });
  }
};
_handleChipClick = new WeakMap();
_collapseThreshold = new WeakMap();
_collapsedAt = new WeakMap();
_GdsFilterChips_instances = new WeakSet();
getChipHeight_fn = function() {
  return this.chips[0]?.offsetHeight || 0;
};
handleSlotChange_fn = function() {
  if (this.value === void 0) {
    if (!this.multiple) {
      const selChipValue = this.chips.find((s) => s.selected)?.value;
      if (selChipValue) {
        this.value = selChipValue;
      }
    } else {
      const selChipValues = this.chips.filter((s) => s.selected).map((s) => s.value);
      if (selChipValues.length) {
        this.value = selChipValues;
      }
    }
  } else {
    this._updateSelectedFromValue();
  }
};
GdsFilterChips.styles = [FilterChipsStyles];
__decorateClass([
  property({ converter: stringArrayConverter })
], GdsFilterChips.prototype, "value", 1);
__decorateClass([
  property({ type: Boolean })
], GdsFilterChips.prototype, "multiple", 2);
__decorateClass([
  property()
], GdsFilterChips.prototype, "label", 2);
__decorateClass([
  property({ type: Boolean, attribute: "row-collapse" })
], GdsFilterChips.prototype, "rowCollapse", 2);
__decorateClass([
  state()
], GdsFilterChips.prototype, "_collapsed", 2);
__decorateClass([
  query("slot")
], GdsFilterChips.prototype, "_elSlot", 2);
__decorateClass([
  resizeObserver()
], GdsFilterChips.prototype, "_handleResize", 1);
__decorateClass([
  watch("value")
], GdsFilterChips.prototype, "_updateSelectedFromValue", 1);
GdsFilterChips = __decorateClass([
  gdsCustomElement("gds-filter-chips", { dependsOn: [GdsFilterChip] })
], GdsFilterChips);
export {
  GdsFilterChip,
  GdsFilterChips
};
