// packages/components/src/circular-option-picker/circular-option-picker-option.tsx
import clsx from "clsx";
import { useInstanceId } from "@wordpress/compose";
import { forwardRef, useContext, useEffect } from "@wordpress/element";
import { Icon, check } from "@wordpress/icons";
import { CircularOptionPickerContext } from "./circular-option-picker-context.js";
import Button from "../button/index.js";
import { Composite } from "../composite/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function UnforwardedOptionAsButton(props, forwardedRef) {
  const {
    isPressed,
    label,
    ...additionalProps
  } = props;
  return /* @__PURE__ */ _jsx(Button, {
    ...additionalProps,
    "aria-pressed": isPressed,
    ref: forwardedRef,
    label
  });
}
var OptionAsButton = forwardRef(UnforwardedOptionAsButton);
function UnforwardedOptionAsOption(props, forwardedRef) {
  const {
    id,
    isSelected,
    label,
    ...additionalProps
  } = props;
  const {
    setActiveId,
    activeId
  } = useContext(CircularOptionPickerContext);
  useEffect(() => {
    if (isSelected && !activeId) {
      window.setTimeout(() => setActiveId?.(id), 0);
    }
  }, [isSelected, setActiveId, activeId, id]);
  return /* @__PURE__ */ _jsx(Composite.Item, {
    render: /* @__PURE__ */ _jsx(Button, {
      ...additionalProps,
      role: "option",
      "aria-selected": !!isSelected,
      ref: forwardedRef,
      label
    }),
    id
  });
}
var OptionAsOption = forwardRef(UnforwardedOptionAsOption);
function Option({
  className,
  isSelected,
  selectedIconProps = {},
  tooltipText,
  ...additionalProps
}) {
  const {
    baseId,
    setActiveId
  } = useContext(CircularOptionPickerContext);
  const id = useInstanceId(Option, baseId || "components-circular-option-picker__option");
  const commonProps = {
    id,
    className: "components-circular-option-picker__option",
    __next40pxDefaultSize: true,
    ...additionalProps
  };
  const isListbox = setActiveId !== void 0;
  const optionControl = isListbox ? /* @__PURE__ */ _jsx(OptionAsOption, {
    ...commonProps,
    label: tooltipText,
    isSelected
  }) : /* @__PURE__ */ _jsx(OptionAsButton, {
    ...commonProps,
    label: tooltipText,
    isPressed: isSelected
  });
  return /* @__PURE__ */ _jsxs("div", {
    className: clsx(className, "components-circular-option-picker__option-wrapper"),
    children: [optionControl, isSelected && /* @__PURE__ */ _jsx(Icon, {
      icon: check,
      ...selectedIconProps
    })]
  });
}
export {
  Option
};
//# sourceMappingURL=circular-option-picker-option.js.map
