import { createElement } from "react";
/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */
import { useInstanceId } from '@wordpress/compose';
import { forwardRef, useContext } from '@wordpress/element';
import { Icon, check } from '@wordpress/icons';

/**
 * Internal dependencies
 */
import { CircularOptionPickerContext } from './circular-option-picker-context';
import Button from '../button';
import { CompositeItem } from '../composite/v2';
import Tooltip from '../tooltip';
function UnforwardedOptionAsButton(props, forwardedRef) {
  const {
    isPressed,
    ...additionalProps
  } = props;
  return createElement(Button, {
    ...additionalProps,
    "aria-pressed": isPressed,
    ref: forwardedRef
  });
}
const OptionAsButton = forwardRef(UnforwardedOptionAsButton);
function UnforwardedOptionAsOption(props, forwardedRef) {
  const {
    id,
    isSelected,
    compositeStore,
    ...additionalProps
  } = props;
  const activeId = compositeStore.useState('activeId');
  if (isSelected && !activeId) {
    compositeStore.setActiveId(id);
  }
  return createElement(CompositeItem, {
    render: createElement(Button, {
      ...additionalProps,
      role: "option",
      "aria-selected": !!isSelected,
      ref: forwardedRef
    }),
    store: compositeStore,
    id: id
  });
}
const OptionAsOption = forwardRef(UnforwardedOptionAsOption);
export function Option({
  className,
  isSelected,
  selectedIconProps = {},
  tooltipText,
  ...additionalProps
}) {
  const {
    baseId,
    compositeStore
  } = useContext(CircularOptionPickerContext);
  const id = useInstanceId(Option, baseId || 'components-circular-option-picker__option');
  const commonProps = {
    id,
    className: 'components-circular-option-picker__option',
    ...additionalProps
  };
  const optionControl = compositeStore ? createElement(OptionAsOption, {
    ...commonProps,
    compositeStore: compositeStore,
    isSelected: isSelected
  }) : createElement(OptionAsButton, {
    ...commonProps,
    isPressed: isSelected
  });
  return createElement("div", {
    className: classnames(className, 'components-circular-option-picker__option-wrapper')
  }, tooltipText ? createElement(Tooltip, {
    text: tooltipText
  }, optionControl) : optionControl, isSelected && createElement(Icon, {
    icon: check,
    ...selectedIconProps
  }));
}
//# sourceMappingURL=circular-option-picker-option.js.map