/**
 * External dependencies
 */
import * as Ariakit from '@ariakit/react';
import clsx from 'clsx';

/**
 * Internal dependencies
 */
import _CustomSelect from '../custom-select';
import CustomSelectItem from '../item';
import * as Styled from '../styles';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
function CustomSelectControl(props) {
  const {
    __experimentalShowSelectedHint = false,
    __next40pxDefaultSize = false,
    describedBy,
    options,
    onChange,
    size = 'default',
    value,
    className: classNameProp,
    ...restProps
  } = props;

  // Forward props + store from v2 implementation
  const store = Ariakit.useSelectStore({
    async setValue(nextValue) {
      const nextOption = options.find(item => item.name === nextValue);
      if (!onChange || !nextOption) {
        return;
      }

      // Executes the logic in a microtask after the popup is closed.
      // This is simply to ensure the isOpen state matches that in Downshift.
      await Promise.resolve();
      const state = store.getState();
      const changeObject = {
        highlightedIndex: state.renderedItems.findIndex(item => item.value === nextValue),
        inputValue: '',
        isOpen: state.open,
        selectedItem: nextOption,
        type: ''
      };
      onChange(changeObject);
    },
    value: value?.name,
    // Setting the first option as a default value when no value is provided
    // is already done natively by the underlying Ariakit component,
    // but doing this explicitly avoids the `onChange` callback from firing
    // on initial render, thus making this implementation closer to the v1.
    defaultValue: options[0]?.name
  });
  const children = options.map(({
    name,
    key,
    __experimentalHint,
    style,
    className
  }) => {
    const withHint = /*#__PURE__*/_jsxs(Styled.WithHintItemWrapper, {
      children: [/*#__PURE__*/_jsx("span", {
        children: name
      }), /*#__PURE__*/_jsx(Styled.WithHintItemHint, {
        children: __experimentalHint
      })]
    });
    return /*#__PURE__*/_jsx(CustomSelectItem, {
      value: name,
      children: __experimentalHint ? withHint : name,
      style: style,
      className: clsx(
      // TODO: Legacy classname. Add V1 styles are removed from the codebase
      // 'components-custom-select-control__item',
      className
      // TODO: Legacy classname. Add V1 styles are removed from the codebase
      // {
      // 	'has-hint': __experimentalHint,
      // }
      )
    }, key);
  });
  const renderSelectedValueHint = () => {
    const {
      value: currentValue
    } = store.getState();
    const currentHint = options?.find(({
      name
    }) => currentValue === name);
    return /*#__PURE__*/_jsxs(Styled.SelectedExperimentalHintWrapper, {
      children: [currentValue, /*#__PURE__*/_jsx(Styled.SelectedExperimentalHintItem, {
        children: currentHint?.__experimentalHint
      })]
    });
  };
  const translatedSize = (() => {
    if (__next40pxDefaultSize && size === 'default' || size === '__unstable-large') {
      return 'default';
    }
    if (!__next40pxDefaultSize && size === 'default') {
      return 'compact';
    }
    return size;
  })();
  return /*#__PURE__*/_jsx(_CustomSelect, {
    "aria-describedby": describedBy,
    renderSelectedValue: __experimentalShowSelectedHint ? renderSelectedValueHint : undefined,
    size: translatedSize,
    store: store,
    className: clsx(
    // TODO: Legacy classname. Add V1 styles are removed from the codebase
    // 'components-custom-select-control',
    classNameProp),
    isLegacy: true,
    ...restProps,
    children: children
  });
}
export default CustomSelectControl;
//# sourceMappingURL=index.js.map