"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Option = Option;
var _clsx = _interopRequireDefault(require("clsx"));
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _icons = require("@wordpress/icons");
var _circularOptionPickerContext = require("./circular-option-picker-context");
var _button = _interopRequireDefault(require("../button"));
var _composite = require("../composite");
var _tooltip = _interopRequireDefault(require("../tooltip"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function UnforwardedOptionAsButton(props, forwardedRef) {
  const {
    isPressed,
    ...additionalProps
  } = props;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
    ...additionalProps,
    "aria-pressed": isPressed,
    ref: forwardedRef
  });
}
const OptionAsButton = (0, _element.forwardRef)(UnforwardedOptionAsButton);
function UnforwardedOptionAsOption(props, forwardedRef) {
  const {
    id,
    isSelected,
    ...additionalProps
  } = props;
  const {
    setActiveId,
    activeId
  } = (0, _element.useContext)(_circularOptionPickerContext.CircularOptionPickerContext);
  (0, _element.useEffect)(() => {
    if (isSelected && !activeId) {
      // The setTimeout call is necessary to make sure that this update
      // doesn't get overridden by `Composite`'s internal logic, which picks
      // an initial active item if one is not specifically set.
      window.setTimeout(() => setActiveId?.(id), 0);
    }
  }, [isSelected, setActiveId, activeId, id]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_composite.Composite.Item, {
    render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
      ...additionalProps,
      role: "option",
      "aria-selected": !!isSelected,
      ref: forwardedRef
    }),
    id: id
  });
}
const OptionAsOption = (0, _element.forwardRef)(UnforwardedOptionAsOption);
function Option({
  className,
  isSelected,
  selectedIconProps = {},
  tooltipText,
  ...additionalProps
}) {
  const {
    baseId,
    setActiveId
  } = (0, _element.useContext)(_circularOptionPickerContext.CircularOptionPickerContext);
  const id = (0, _compose.useInstanceId)(Option, baseId || 'components-circular-option-picker__option');
  const commonProps = {
    id,
    className: 'components-circular-option-picker__option',
    __next40pxDefaultSize: true,
    ...additionalProps
  };
  const isListbox = setActiveId !== undefined;
  const optionControl = isListbox ? /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionAsOption, {
    ...commonProps,
    isSelected: isSelected
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionAsButton, {
    ...commonProps,
    isPressed: isSelected
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: (0, _clsx.default)(className, 'components-circular-option-picker__option-wrapper'),
    children: [tooltipText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
      text: tooltipText,
      children: optionControl
    }) : optionControl, isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
      icon: _icons.check,
      ...selectedIconProps
    })]
  });
}
//# sourceMappingURL=circular-option-picker-option.js.map