import {
  __decorateClass,
  __privateAdd,
  __privateMethod
} from "../../../chunks/chunk.QU3DSPNU.js";
var _RadioGroup_instances, initializeFocusable_fn, handleFocus_fn, dispatchChangeEvents_fn, handleRadioChange_fn, handleKeyDown_fn, focusAndSelectRadio_fn, renderRadioGroupContents_fn, renderFieldControlHeader_fn, renderRadios_fn, renderFieldControlFooter_fn;
import { localized } from "@lit/localize";
import { property, query } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { GdsFormControlFooter } from "../../../primitives/form-control-footer/form-control-footer.component.js";
import { GdsFormControlHeader } from "../../../primitives/form-control-header/form-control-header.component.js";
import { gdsCustomElement, html } from "../../../scoping.js";
import { tokens } from "../../../tokens.style.js";
import { watch } from "../../../utils/decorators/watch.js";
import {
  withLayoutChildProps,
  withMarginProps,
  withSizeXProps
} from "../../../utils/mixins/declarative-layout-mixins.js";
import { GdsFormControlElement } from "../../form/form-control.js";
import { styles } from "./radio-group.styles.js";
let RadioGroup = class extends GdsFormControlElement {
  constructor() {
    super(...arguments);
    __privateAdd(this, _RadioGroup_instances);
    this.size = "large";
    this.direction = "column";
    this.supportingText = "";
    this.showExtendedSupportingText = false;
    this._isConnected = false;
  }
  /**
   * Returns an array of `<gds-radio>` elements in the radio group.
   *
   * @readonly
   */
  get radios() {
    return Array.from(
      this.querySelectorAll("[gds-element=gds-radio]")
    );
  }
  connectedCallback() {
    super.connectedCallback();
    this._isConnected = true;
    this.updateComplete.then(() => {
      this._syncRadioStates();
      __privateMethod(this, _RadioGroup_instances, initializeFocusable_fn).call(this);
    });
    this.addEventListener("invalid", this._syncRadioStates);
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this._isConnected = false;
    this.removeEventListener("invalid", this._syncRadioStates);
  }
  focus(options) {
    this._getValidityAnchor()?.focus(options);
  }
  _getValidityAnchor() {
    return this._contentElement;
  }
  _handleValueChange() {
    if (!this._isConnected) return;
    this._syncRadioStates();
    this.updateComplete.then(() => {
      __privateMethod(this, _RadioGroup_instances, initializeFocusable_fn).call(this);
    });
  }
  _syncRadioStates() {
    if (!this._isConnected) return;
    this.radios.forEach((radio) => {
      radio.checked = radio.value === this.value;
      radio.size = this.size;
      radio.invalid = this.invalid;
      radio.errorMessage = this.errorMessage;
    });
  }
  render() {
    const classes = {
      "radio-group": true,
      "direction-row": this.direction === "row",
      "direction-column": this.direction === "column"
    };
    return html`<div
      role="radiogroup"
      id="radiogroup"
      class=${classMap(classes)}
      aria-labelledby="group-label"
      aria-describedby="supporting-text extended-supporting-text footer"
      aria-invalid=${this.invalid}
    >
      ${__privateMethod(this, _RadioGroup_instances, renderRadioGroupContents_fn).call(this)}
    </div>`;
  }
};
_RadioGroup_instances = new WeakSet();
initializeFocusable_fn = function() {
  if (!this._contentElement || !this._isConnected) return;
  const selectedRadio = this.radios.find((radio) => radio.checked);
  if (selectedRadio) {
    selectedRadio.setAttribute("tabindex", "0");
    this._contentElement.setAttribute("tabindex", "-1");
  } else {
    this._contentElement.setAttribute("tabindex", "0");
  }
  this.radios.filter((radio) => !radio.checked).forEach((radio) => radio.setAttribute("tabindex", "-1"));
};
handleFocus_fn = function() {
  if (!this._contentElement || !this._isConnected) return;
  const selectedRadio = this.radios.find((radio) => radio.checked);
  const radioToFocus = selectedRadio || this.radios[0];
  if (radioToFocus) {
    radioToFocus.focus();
    if (!selectedRadio) {
      this.radios.forEach((radio) => radio.setAttribute("tabindex", "-1"));
      radioToFocus.setAttribute("tabindex", "0");
      this._contentElement.setAttribute("tabindex", "-1");
    }
  }
};
dispatchChangeEvents_fn = function() {
  this.updateComplete.then(
    () => this.dispatchStandardEvent("change", {
      composed: true,
      bubbles: true
    })
  );
  this.updateComplete.then(
    () => this.dispatchStandardEvent("input", {
      bubbles: true,
      composed: true
    })
  );
};
handleRadioChange_fn = function(e) {
  e.stopPropagation();
  const radio = e.target;
  this.value = radio.value;
  this._syncRadioStates();
  __privateMethod(this, _RadioGroup_instances, dispatchChangeEvents_fn).call(this);
};
handleKeyDown_fn = function(e) {
  if (!this._isConnected) return;
  const radios = this.radios.filter((radio) => !radio.disabled);
  if (radios.length === 0) return;
  let currentIndex = radios.findIndex(
    (radio) => document.activeElement === radio
  );
  if (currentIndex === -1) {
    currentIndex = radios.findIndex((radio) => radio.checked);
    if (currentIndex === -1) currentIndex = 0;
  }
  switch (e.key) {
    case "ArrowDown":
    case "ArrowRight": {
      e.preventDefault();
      const nextIndex = (currentIndex + 1) % radios.length;
      __privateMethod(this, _RadioGroup_instances, focusAndSelectRadio_fn).call(this, radios[nextIndex]);
      break;
    }
    case "ArrowUp":
    case "ArrowLeft": {
      e.preventDefault();
      const nextIndex = (currentIndex - 1 + radios.length) % radios.length;
      __privateMethod(this, _RadioGroup_instances, focusAndSelectRadio_fn).call(this, radios[nextIndex]);
      break;
    }
    default:
      return;
  }
};
focusAndSelectRadio_fn = function(radio) {
  if (!this._contentElement || !this._isConnected) return;
  this.radios.forEach((r) => r.setAttribute("tabindex", "-1"));
  radio.setAttribute("tabindex", "0");
  this._contentElement.setAttribute("tabindex", "-1");
  radio.checked = true;
  radio.focus();
  this.value = radio.value;
  this._syncRadioStates();
  __privateMethod(this, _RadioGroup_instances, dispatchChangeEvents_fn).call(this);
};
renderRadioGroupContents_fn = function() {
  const elements = [
    __privateMethod(this, _RadioGroup_instances, renderFieldControlHeader_fn).call(this),
    __privateMethod(this, _RadioGroup_instances, renderRadios_fn).call(this),
    __privateMethod(this, _RadioGroup_instances, renderFieldControlFooter_fn).call(this)
  ];
  return elements.map((element) => html`${element}`);
};
renderFieldControlHeader_fn = function() {
  if (this.label) {
    return html` <gds-form-control-header
        class="size-${this.size}"
        .showExtendedSupportingText="${this.showExtendedSupportingText}"
      >
        <label id="group-label" slot="label">${this.label}</label>
        <span slot="supporting-text" id="supporting-text">
          ${this.supportingText}
        </span>
        <slot
          id="extended-supporting-text"
          name="extended-supporting-text"
          slot="extended-supporting-text"
        ></slot>
      </gds-form-control-header>`;
  }
};
renderRadios_fn = function() {
  return html` <div
      class="content"
      @keydown=${__privateMethod(this, _RadioGroup_instances, handleKeyDown_fn)}
      @focus=${__privateMethod(this, _RadioGroup_instances, handleFocus_fn)}
    >
      <slot @input=${__privateMethod(this, _RadioGroup_instances, handleRadioChange_fn)}></slot>
    </div>`;
};
renderFieldControlFooter_fn = function() {
  return html` <gds-form-control-footer
      id="footer"
      class="size-${this.size}"
      .errorMessage=${this.invalid ? this.errorMessage : void 0}
    >
    </gds-form-control-footer>`;
};
RadioGroup.styles = [tokens, styles];
__decorateClass([
  property()
], RadioGroup.prototype, "size", 2);
__decorateClass([
  property()
], RadioGroup.prototype, "direction", 2);
__decorateClass([
  property({ attribute: "supporting-text" })
], RadioGroup.prototype, "supportingText", 2);
__decorateClass([
  property({
    attribute: "show-extended-supporting-text",
    type: Boolean,
    reflect: true
  })
], RadioGroup.prototype, "showExtendedSupportingText", 2);
__decorateClass([
  query(".content")
], RadioGroup.prototype, "_contentElement", 2);
__decorateClass([
  watch("value")
], RadioGroup.prototype, "_handleValueChange", 1);
__decorateClass([
  watch("invalid"),
  watch("errorMessage")
], RadioGroup.prototype, "_syncRadioStates", 1);
RadioGroup = __decorateClass([
  localized()
], RadioGroup);
let GdsRadioGroup = class extends withLayoutChildProps(
  withMarginProps(withSizeXProps(RadioGroup))
) {
};
GdsRadioGroup = __decorateClass([
  gdsCustomElement("gds-radio-group", {
    dependsOn: [GdsFormControlHeader, GdsFormControlFooter]
  })
], GdsRadioGroup);
export {
  GdsRadioGroup
};
