import {
  ErrorMessage
} from "./chunk-MZJT3USG.js";
import {
  Label
} from "./chunk-ZN7OWLZY.js";

// src/components/Radio/Radio.tsx
import classNames from "classnames/dedupe";
import {
  Children,
  isValidElement,
  useLayoutEffect,
  useMemo,
  useRef
} from "react";
import "@simplybusiness/mobius/src/components/Radio/Radio.css";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var Radio = ({ ref, ...props }) => {
  const {
    children,
    value,
    label,
    className,
    isDisabled,
    errorMessage,
    onChange,
    defaultChecked,
    groupDisabled,
    name,
    selected,
    setSelected,
    isRequired,
    onOverflow,
    orientation,
    ...otherProps
  } = props;
  const realDisabled = groupDisabled || isDisabled;
  const isMultiline = label && children;
  const isControlled = selected !== void 0;
  const isChecked = isControlled ? selected === value : defaultChecked;
  const contentRef = useRef(null);
  const prevOverflowRef = useRef({
    vertical: false,
    horizontal: false
  });
  const hasIconFirst = useMemo(() => {
    if (!children || Children.count(children) === 0) return false;
    const firstChild = Children.toArray(children)[0];
    if (!isValidElement(firstChild)) return false;
    const props2 = firstChild.props;
    return "icon" in props2 && props2.icon !== void 0;
  }, [children]);
  useLayoutEffect(() => {
    if (!contentRef.current || !onOverflow) return;
    if (orientation === "vertical") {
      return;
    }
    const element = contentRef.current;
    const scrollOverflowVertical = element.scrollHeight > element.clientHeight;
    const scrollOverflowHorizontal = element.scrollWidth > element.clientWidth;
    const styles = window.getComputedStyle(element);
    const lineHeight = parseFloat(styles.lineHeight);
    const fontSize = parseFloat(styles.fontSize);
    const singleLineHeight = isNaN(lineHeight) ? fontSize * 1.2 : lineHeight;
    const WRAP_DETECTION_TOLERANCE = 1.1;
    const hasWrapped = element.clientHeight > singleLineHeight * WRAP_DETECTION_TOLERANCE;
    const vertical = scrollOverflowVertical || hasWrapped;
    const horizontal = scrollOverflowHorizontal;
    const newOverflowState = { vertical, horizontal };
    const prevOverflow = prevOverflowRef.current;
    if (newOverflowState.vertical !== prevOverflow.vertical || newOverflowState.horizontal !== prevOverflow.horizontal) {
      prevOverflowRef.current = newOverflowState;
      onOverflow(newOverflowState);
    }
  }, [label, children, onOverflow, orientation]);
  const radioClasses = {
    "--is-disabled": realDisabled,
    "--is-selected": selected === value,
    "--is-multiline": !!isMultiline,
    "--is-required": isRequired
  };
  const containerClasses = classNames(
    "mobius-radio__label",
    radioClasses,
    className,
    { "--has-icon-first": hasIconFirst }
  );
  const inputClasses = classNames("mobius-radio__input", radioClasses);
  const { "aria-describedby": _ariaDescribedBy, ...rest } = otherProps;
  const handleChange = (event) => {
    if (setSelected) {
      setSelected(event.target.value);
    }
    if (onChange) {
      const adaptedEvent = {
        ...event.nativeEvent,
        target: event.target
      };
      onChange(adaptedEvent);
    }
  };
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(Label, { className: containerClasses, children: [
      /* @__PURE__ */ jsx(
        "input",
        {
          "aria-describedby": otherProps["aria-describedby"],
          disabled: realDisabled,
          ref,
          className: inputClasses,
          value,
          tabIndex: 0,
          type: "radio",
          onChange: handleChange,
          ...isControlled ? { checked: isChecked } : { defaultChecked: isChecked },
          name,
          required: isRequired,
          ...rest
        }
      ),
      isMultiline ? /* @__PURE__ */ jsxs("div", { ref: contentRef, className: "mobius-radio__content--multiline", children: [
        /* @__PURE__ */ jsx("div", { className: "mobius-radio__content-first-line", children: label }),
        /* @__PURE__ */ jsx("div", { className: "mobius-radio__extra-content", children })
      ] }) : /* @__PURE__ */ jsx("div", { ref: contentRef, className: "mobius-radio__content", children: label || children })
    ] }),
    errorMessage && /* @__PURE__ */ jsx(ErrorMessage, { errorMessage })
  ] });
};
Radio.displayName = "Radio";

export {
  Radio
};
//# sourceMappingURL=chunk-M62U4QGQ.js.map
