import { unsafeCSS, LitElement, html } from "lit";
import { property, queryAssignedElements } from "lit/decorators.js";
import { ObcToggleButtonOptionType, ObcToggleButtonOptionVariant } from "../toggle-button-option/toggle-button-option.js";
import componentStyle from "./toggle-button-group.css.js";
import { customElement } from "../../decorator.js";
import { classMap } from "lit/directives/class-map.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 ObcToggleButtonGroup = class extends LitElement {
  constructor() {
    super(...arguments);
    this.value = "";
    this.type = ObcToggleButtonOptionType.text;
    this.variant = ObcToggleButtonOptionVariant.regular;
    this.hugText = false;
    this.externalControl = false;
    this.disabled = false;
    this.large = 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.setNoDivider();
      return;
    }
    if (!this.canSelectOption(newValue)) {
      if (this.value && this.getOptionByValue(this.value)) {
        this.options.forEach((option) => {
          option.selected = option.value === this.value;
        });
        this.setNoDivider();
        return;
      }
      const fallback = this.getFirstSelectableOption();
      newValue = fallback?.value || "";
    }
    this.value = newValue;
    this.options.forEach((option) => {
      option.selected = option.value === newValue;
    });
    this.setNoDivider();
    if (emitEvent && oldValue !== newValue) {
      this.dispatchEvent(
        new CustomEvent("value", {
          detail: { value: newValue, previousValue: oldValue }
        })
      );
    }
  }
  updateActivated(newValue) {
    if (newValue) {
      this.options.forEach((option) => {
        option.activated = option.value === newValue;
      });
    } else {
      this.options.forEach((option) => {
        option.activated = false;
      });
    }
  }
  setNoDivider() {
    const selectedOptionIndex = Array.from(this.options).findIndex(
      (option) => option.selected
    );
    this.options.forEach((option) => {
      option.showDivider = true;
    });
    if (selectedOptionIndex === -1) {
      return;
    }
    const nextOption = this.options[selectedOptionIndex + 1];
    if (nextOption) {
      nextOption.showDivider = false;
    }
  }
  firstUpdated(_changedProperties) {
    super.firstUpdated(_changedProperties);
    const values = Array.from(this.options).map((opt) => opt.value);
    const uniqueValues = new Set(values);
    if (values.length !== uniqueValues.size) {
      console.warn(
        "Toggle button group has duplicate values. This may cause unexpected behavior."
      );
    }
    this.options.forEach((option) => {
      this._originalDisabledStates.set(option, option.hasAttribute("disabled"));
      option.addEventListener("selected", (e) => this.handleOptionClick(e));
      const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          if (mutation.attributeName === "disabled" && !option.hasAttribute("data-group-disabled")) {
            this._originalDisabledStates.set(
              option,
              option.hasAttribute("disabled")
            );
            this.handleOptionDisabledChange();
          }
        });
      });
      observer.observe(option, {
        attributes: true,
        attributeFilter: ["disabled"]
      });
      option.type = this.type;
      option.variant = this.variant;
      option.hugText = this.hugText;
      option.large = this.large;
      if (this.disabled) {
        option.setAttribute("data-group-disabled", "true");
        option.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);
    }
    if (this.activated) {
      this.updateActivated(this.activated);
    }
  }
  handleOptionDisabledChange() {
    const currentOption = this.getOptionByValue(this.value);
    if (currentOption?.disabled && this.hasAnyEnabledOption()) {
      const firstSelectable = this.getFirstSelectableOption();
      if (firstSelectable) {
        this.updateSelection(firstSelectable.value);
      }
    }
  }
  handleOptionClick(event) {
    const { value } = event.detail;
    if (this.externalControl) {
      this.dispatchEvent(
        new CustomEvent("value", {
          detail: { value, previousValue: this.value }
        })
      );
    } else {
      this.updateSelection(value);
    }
  }
  willUpdate(changedProperties) {
    if (changedProperties.has("value")) {
      this.updateSelection(this.value);
    }
    if (changedProperties.has("activated")) {
      this.updateActivated(this.activated);
    }
    if (changedProperties.has("type") || changedProperties.has("variant") || changedProperties.has("hugText") || changedProperties.has("large")) {
      this.options.forEach((option) => {
        option.type = this.type;
        option.variant = this.variant;
        option.hugText = this.hugText;
        option.large = this.large;
      });
    }
    if (changedProperties.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);
      }
    }
  }
  render() {
    const classes = {
      "outer-wrapper": true,
      flat: this.variant === ObcToggleButtonOptionVariant.flat,
      regular: this.variant === ObcToggleButtonOptionVariant.regular,
      "hug-text": this.hugText,
      "icon-text-under": this.type === ObcToggleButtonOptionType.iconTextUnder,
      disabled: this.disabled,
      large: this.large
    };
    return html`
      <div class=${classMap(classes)}>
        <div class="wrapper">
          <slot></slot>
        </div>
      </div>
    `;
  }
};
ObcToggleButtonGroup.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: String })
], ObcToggleButtonGroup.prototype, "value", 2);
__decorateClass([
  property({ type: String })
], ObcToggleButtonGroup.prototype, "activated", 2);
__decorateClass([
  property({ type: String })
], ObcToggleButtonGroup.prototype, "type", 2);
__decorateClass([
  property({ type: String })
], ObcToggleButtonGroup.prototype, "variant", 2);
__decorateClass([
  property({ type: Boolean })
], ObcToggleButtonGroup.prototype, "hugText", 2);
__decorateClass([
  property({ type: Boolean })
], ObcToggleButtonGroup.prototype, "externalControl", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], ObcToggleButtonGroup.prototype, "disabled", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], ObcToggleButtonGroup.prototype, "large", 2);
__decorateClass([
  queryAssignedElements({ selector: "obc-toggle-button-option" })
], ObcToggleButtonGroup.prototype, "options", 2);
ObcToggleButtonGroup = __decorateClass([
  customElement("obc-toggle-button-group")
], ObcToggleButtonGroup);
export {
  ObcToggleButtonGroup
};
//# sourceMappingURL=toggle-button-group.js.map
