import "../RadioGroup.css";
import { jsx, jsxs } from "react/jsx-runtime";
import { Radio } from "antd";
import { useRef, useState, useMemo, useCallback, useEffect } from "react";
import Button from "./Button.js";
import Icon from "./Icon.js";
import useResize from "./internal/useResize.js";
import { useTheme } from "./Theme/UI.js";
import "./Theme/themeUtils.js";
import "./Theme/themes.js";
import Tooltip from "./Tooltip.js";
import { ConditionalWrapper } from "./internal/ConditionalWrapper.js";
const base = "RadioGroup_base_c5402";
const option = "RadioGroup_option_c5402";
const label = "RadioGroup_label_c5402";
const iconOnly = "RadioGroup_iconOnly_c5402";
const row = "RadioGroup_row_c5402";
const css = {
  base,
  option,
  label,
  iconOnly,
  row
};
const DEFAULT_RESIZE_THROTTLE_TIME = 500;
const PARENT_WIDTH_BUFFER = 16;
const HEIGHT_LIMIT = 50;
function RadioGroup({
  defaultValue,
  iconOnly: iconOnly2 = false,
  onChange,
  options,
  value,
  radioType = "button"
}) {
  const { refCallback, size, refObject: baseRef } = useResize();
  const originalWidth = useRef();
  const [sizes, setSizes] = useState({ baseHeight: 0, baseWidth: 0, parentWidth: 0 });
  const {
    themeSettings: { className: themeClass }
  } = useTheme();
  const classes = [css.base, themeClass];
  if (radioType === "row")
    classes.push(css.row);
  const hasIconsAndLabels = useMemo(() => {
    if (options.length === 0)
      return false;
    return options.reduce((acc, option2) => acc || !!option2.icon && !!option2.label, false);
  }, [options]);
  const showLabels = useMemo(() => {
    if (radioType === "row")
      return true;
    if (!hasIconsAndLabels || !baseRef.current)
      return true;
    if (sizes.baseWidth === 0 || sizes.parentWidth === 0)
      return true;
    if (originalWidth.current && originalWidth.current < sizes.parentWidth)
      return true;
    if (sizes.baseHeight > HEIGHT_LIMIT)
      return false;
    return true;
  }, [hasIconsAndLabels, sizes]);
  if (iconOnly2)
    classes.push(css.iconOnly);
  const handleChange = useCallback(
    (e) => {
      onChange == null ? void 0 : onChange(e.target.value);
    },
    [onChange]
  );
  useEffect(() => {
    if (!hasIconsAndLabels || !baseRef.current)
      return;
    const parent = baseRef.current.parentElement;
    if (!parent)
      return;
    const parentRect = parent.getBoundingClientRect();
    if (!parentRect)
      return;
    const baseRect = size;
    if (!originalWidth.current)
      originalWidth.current = baseRect.width;
    setSizes({
      baseHeight: baseRect.height,
      baseWidth: parentRect.width,
      parentWidth: parentRect.width - PARENT_WIDTH_BUFFER
    });
  }, [hasIconsAndLabels, size]);
  return /* @__PURE__ */ jsx(
    Radio.Group,
    {
      className: classes.join(" "),
      defaultValue,
      ref: refCallback,
      size: radioType === "row" ? "large" : void 0,
      value,
      onChange: handleChange,
      children: options.map((option2) => /* @__PURE__ */ jsx(
        ConditionalWrapper,
        {
          condition: !showLabels || iconOnly2,
          wrapper: (children) => /* @__PURE__ */ jsx(Tooltip, { content: option2.label, placement: "top", children }),
          children: radioType === "radio" ? /* @__PURE__ */ jsxs(Radio, { className: css.option, value: option2.id, children: [
            option2.icon && /* @__PURE__ */ jsx(Icon, { decorative: true, name: option2.icon, size: option2.iconSize }),
            option2.label && showLabels && !iconOnly2 && /* @__PURE__ */ jsx("span", { className: css.label, children: option2.label })
          ] }) : radioType === "row" ? /* @__PURE__ */ jsx(
            Button,
            {
              column: true,
              icon: /* @__PURE__ */ jsx(Icon, { decorative: true, name: option2.icon, size: option2.iconSize }),
              selected: value ? option2.id === value : option2.id === defaultValue,
              size: "large",
              onClick: () => onChange == null ? void 0 : onChange(option2.id),
              children: option2.label && showLabels && !iconOnly2 && /* @__PURE__ */ jsx("span", { className: css.label, children: option2.label })
            }
          ) : /* @__PURE__ */ jsxs(Radio.Button, { className: css.option, value: option2.id, children: [
            option2.icon && /* @__PURE__ */ jsx(Icon, { decorative: true, name: option2.icon, size: option2.iconSize }),
            option2.label && showLabels && !iconOnly2 && /* @__PURE__ */ jsx("span", { className: css.label, children: option2.label })
          ] })
        },
        option2.id
      ))
    }
  );
}
export {
  DEFAULT_RESIZE_THROTTLE_TIME,
  RadioGroup as default
};
