import { unsafeCSS, LitElement, html } from "lit";
import { property, queryAssignedElements } from "lit/decorators.js";
import { customElement } from "../../decorator.js";
import { classMap } from "lit/directives/class-map.js";
import { ObcToggleButtonVerticalOptionType } from "../toggle-button-vertical-option/toggle-button-vertical-option.js";
import style from "./toggle-button-vertical-group.css.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
let ObcToggleButtonVerticalGroup = class extends LitElement {
  constructor() {
    super(...arguments);
    this.value = "";
    this.type = ObcToggleButtonVerticalOptionType.regular;
    this.hugWidth = false;
    this.disabled = false;
    this._originalDisabledStates = /* @__PURE__ */ new Map();
  }
  hasAnyEnabledOption() {
    if (this.disabled) return false;
    return Array.from(this.options).some((opt) => !opt.disabled);
  }
  canSelectOption(value) {
    if (this.disabled) return false;
    const option = this.getOptionByValue(value);
    return option !== null && !option.disabled;
  }
  getOptionByValue(value) {
    return Array.from(this.options).find((opt) => opt.value === value) || null;
  }
  getFirstSelectableOption() {
    if (this.disabled) return null;
    return Array.from(this.options).find((opt) => !opt.disabled) || null;
  }
  updateSelection(newValue, emitEvent = true) {
    const oldValue = this.value;
    if (!this.hasAnyEnabledOption()) {
      this.options.forEach((option) => {
        option.selected = option.value === this.value;
      });
      this.updateDividers();
      return;
    }
    if (!this.canSelectOption(newValue)) {
      if (this.value && this.getOptionByValue(this.value)) {
        this.options.forEach((option) => {
          option.selected = option.value === this.value;
        });
        this.updateDividers();
        return;
      }
      const fallback = this.getFirstSelectableOption();
      newValue = fallback?.value || "";
    }
    this.value = newValue;
    this.options.forEach((option) => {
      option.selected = option.value === newValue;
    });
    this.updateDividers();
    if (emitEvent && oldValue !== newValue) {
      this.dispatchEvent(
        new CustomEvent("value", {
          detail: { value: newValue, previousValue: oldValue }
        })
      );
    }
  }
  firstUpdated(changed) {
    super.firstUpdated(changed);
    const values = Array.from(this.options).map((opt) => opt.value);
    const uniqueValues = new Set(values);
    if (values.length !== uniqueValues.size) {
      console.warn(
        "Toggle button vertical group has duplicate values. This may cause unexpected behavior."
      );
    }
    this.options.forEach((opt) => {
      this._originalDisabledStates.set(opt, opt.disabled);
      opt.addEventListener("selected", (e) => this.onOptionSelected(e));
      const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          if (mutation.attributeName === "disabled" && !opt.hasAttribute("data-group-disabled")) {
            this._originalDisabledStates.set(opt, opt.disabled);
            this.handleOptionDisabledChange();
          }
        });
      });
      observer.observe(opt, { attributes: true, attributeFilter: ["disabled"] });
      opt.type = this.type;
      if (this.disabled) {
        opt.setAttribute("data-group-disabled", "true");
        opt.disabled = true;
      }
    });
    if (!this.value || !this.getOptionByValue(this.value)) {
      const firstSelectable = this.getFirstSelectableOption();
      if (firstSelectable) {
        this.updateSelection(firstSelectable.value, false);
      }
    } else {
      this.updateSelection(this.value, false);
    }
  }
  handleOptionDisabledChange() {
    const currentOption = this.getOptionByValue(this.value);
    if (currentOption?.disabled && this.hasAnyEnabledOption()) {
      const firstSelectable = this.getFirstSelectableOption();
      if (firstSelectable) {
        this.updateSelection(firstSelectable.value);
      }
    }
  }
  willUpdate(changed) {
    if (changed.has("value")) {
      this.updateSelection(this.value);
    }
    if (changed.has("type")) {
      this.options.forEach((opt) => {
        opt.type = this.type;
      });
    }
    if (changed.has("disabled")) {
      this.options.forEach((option) => {
        if (this.disabled) {
          option.setAttribute("data-group-disabled", "true");
          option.disabled = true;
        } else {
          option.removeAttribute("data-group-disabled");
          const originalState = this._originalDisabledStates.get(option) || false;
          option.disabled = originalState;
        }
      });
    }
  }
  updated(changedProperties) {
    super.updated(changedProperties);
    const currentOption = this.getOptionByValue(this.value);
    if (currentOption?.disabled && this.hasAnyEnabledOption()) {
      const firstSelectable = this.getFirstSelectableOption();
      if (firstSelectable) {
        this.updateSelection(firstSelectable.value);
      }
    }
  }
  updateDividers() {
    const last = this.options.length - 1;
    this.options.forEach((opt, idx) => {
      opt.showDivider = idx !== last;
    });
  }
  onOptionSelected(e) {
    const { value } = e.detail;
    this.updateSelection(value);
  }
  render() {
    const classes = {
      "outer-wrapper": true,
      flat: this.type === ObcToggleButtonVerticalOptionType.flat,
      regular: this.type === ObcToggleButtonVerticalOptionType.regular,
      normal: this.type === ObcToggleButtonVerticalOptionType.normal,
      "hug-width": this.hugWidth,
      disabled: this.disabled
    };
    return html`
      <div class=${classMap(classes)}>
        <div class="wrapper"><slot></slot></div>
      </div>
    `;
  }
};
ObcToggleButtonVerticalGroup.styles = unsafeCSS(style);
__decorateClass([
  property({ type: String })
], ObcToggleButtonVerticalGroup.prototype, "value", 2);
__decorateClass([
  property({ type: String })
], ObcToggleButtonVerticalGroup.prototype, "type", 2);
__decorateClass([
  property({ type: Boolean })
], ObcToggleButtonVerticalGroup.prototype, "hugWidth", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], ObcToggleButtonVerticalGroup.prototype, "disabled", 2);
__decorateClass([
  queryAssignedElements({ selector: "obc-toggle-button-vertical-option" })
], ObcToggleButtonVerticalGroup.prototype, "options", 2);
ObcToggleButtonVerticalGroup = __decorateClass([
  customElement("obc-toggle-button-vertical-group")
], ObcToggleButtonVerticalGroup);
export {
  ObcToggleButtonVerticalGroup
};
//# sourceMappingURL=toggle-button-vertical-group.js.map
