import { useEffect, useRef } from "preact/compat";
// from react-stately
import { SvgIcon } from "../Icons";
import { useOption } from "../react-aria"; // from react-aria
import classNames from 'classnames';
import { jsx as _jsx } from "preact/compat/jsx-runtime";
import { jsxs as _jsxs } from "preact/compat/jsx-runtime";
export function getOptionId(rootId, index) {
  return `${rootId}__item--${index}`;
}
export function DropdownMenuOption(_ref) {
  let {
    componentClass,
    item,
    state,
    rootId
  } = _ref;
  const ref = useRef(null);
  const {
    optionProps,
    isSelected,
    isFocused,
    isDisabled
  } = useOption({
    key: item.key
  }, state, ref);
  const selectedIndicator = /*#__PURE__*/_jsx("span", {
    className: `${componentClass}__menu-item-selected-indicator`,
    children: /*#__PURE__*/_jsx(SvgIcon, {
      title: "",
      viewBox: "0 0 448 512",
      className: "ds-u-font-size--sm",
      children: /*#__PURE__*/_jsx("path", {
        d: "M443.3 100.7c6.2 6.2 6.2 16.4 0 22.6l-272 272c-6.2 6.2-16.4 6.2-22.6 0l-144-144c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L160 361.4l260.7-260.7c6.2-6.2 16.4-6.2 22.6 0z"
      })
    })
  });
  const {
    textValue,
    ...extraAttrs
  } = item.props;

  // Work around [this issue](https://github.com/adobe/react-spectrum/issues/4974) by manually
  // scrolling the selected option into view. At the time of writing this, we are using
  // `@react-aria/selection` version 3.16.1
  useEffect(() => {
    if (state.isOpen && isSelected) {
      ref.current?.scrollIntoView({
        block: 'nearest'
      });
    }
  }, [isSelected, state.isOpen]);
  return /*#__PURE__*/_jsxs("li", {
    ...optionProps,
    id: getOptionId(rootId, item.index),
    ...extraAttrs,
    ref: ref,
    className: classNames(item.props.className, `${componentClass}__menu-item`, isFocused && `${componentClass}__menu-item--highlighted`, isSelected && `${componentClass}__menu-item--selected`, isDisabled && `${componentClass}__menu-item--disabled`),
    children: [isSelected && selectedIndicator, /*#__PURE__*/_jsx("span", {
      children: item.rendered
    })]
  });
}
export default DropdownMenuOption;