import { html } from 'lit';
import { state, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { boolean } from '../../internal/boolean.mjs';
import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
import { watch } from '../../internal/watch.mjs';
import styles from './radio.styles.mjs';

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;
};
class FlowUiRadio extends FlowRdfElement {
  constructor() {
    super(...arguments);
    this.checked = false;
    this.hasFocus = false;
    this.size = "medium";
    this.variant = "secondary";
    this.disabled = false;
    this.reverse = false;
  }
  connectedCallback() {
    super.connectedCallback();
    this.disabled = boolean(this.disabled, true);
    this.reverse = boolean(this.reverse, true);
    this.handleBlur = this.handleBlur.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.handleFocus = this.handleFocus.bind(this);
    this.setInitialAttributes();
    this.addEventListeners();
  }
  disconnectedCallback() {
    this.removeEventListeners();
  }
  addEventListeners() {
    this.addEventListener("blur", this.handleBlur);
    this.addEventListener("click", this.handleClick);
    this.addEventListener("focus", this.handleFocus);
  }
  removeEventListeners() {
    this.removeEventListener("blur", this.handleBlur);
    this.removeEventListener("click", this.handleClick);
    this.removeEventListener("focus", this.handleFocus);
  }
  handleBlur() {
    this.hasFocus = false;
    this.emit("flow-ui-blur");
  }
  handleClick() {
    if (!this.disabled) {
      this.checked = true;
    }
  }
  handleFocus() {
    this.hasFocus = true;
    this.emit("flow-ui-focus");
  }
  setInitialAttributes() {
    this.setAttribute("role", "radio");
    this.setAttribute("tabindex", "-1");
    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
  }
  handleCheckedChange() {
    this.setAttribute("aria-checked", this.checked ? "true" : "false");
    this.setAttribute("tabindex", this.checked ? "0" : "-1");
  }
  handleDisabledChange() {
    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
  }
  render() {
    return html`
      <span
        part="base"
        class=${classMap({
      radio: true,
      "radio--checked": this.checked,
      "radio--disabled": this.disabled,
      "radio--focused": this.hasFocus,
      "radio--small": this.size === "small",
      "radio--medium": this.size === "medium",
      "radio--large": this.size === "large",
      "radio--primary": this.variant === "primary",
      "radio--secondary": this.variant === "secondary",
      "radio--success": this.variant === "success",
      "radio--warning": this.variant === "warning",
      "radio--danger": this.variant === "danger",
      "radio--neutral": this.variant === "neutral",
      "radio--reverse": this.reverse
    })}
      >
        <span part="${`control${this.checked ? " control--checked" : ""}`}" class="radio__control">
          ${this.checked ? html`
                <flow-ui-icon
                  part="checked-icon"
                  class="radio__checked-icon"
                  library="system"
                  name="radio"
                ></flow-ui-icon>
              ` : ""}
        </span>

        <slot part="label" class="radio__label"></slot>
      </span>
    `;
  }
}
FlowUiRadio.styles = styles;
__decorateClass([
  state()
], FlowUiRadio.prototype, "checked", 2);
__decorateClass([
  state()
], FlowUiRadio.prototype, "hasFocus", 2);
__decorateClass([
  property()
], FlowUiRadio.prototype, "value", 2);
__decorateClass([
  property({ reflect: true })
], FlowUiRadio.prototype, "size", 2);
__decorateClass([
  property()
], FlowUiRadio.prototype, "variant", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiRadio.prototype, "disabled", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiRadio.prototype, "reverse", 2);
__decorateClass([
  watch("checked")
], FlowUiRadio.prototype, "handleCheckedChange", 1);
__decorateClass([
  watch("disabled", { waitUntilFirstUpdate: true })
], FlowUiRadio.prototype, "handleDisabledChange", 1);

export { FlowUiRadio as default };
