import { createElement, Fragment } from "react";
/**
 * External dependencies
 */
// eslint-disable-next-line no-restricted-imports
import * as Ariakit from '@ariakit/react';
/**
 * WordPress dependencies
 */
import { createContext, useContext } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import * as Styled from './styles';
export const CustomSelectContext = createContext(undefined);
function defaultRenderSelectedValue(value) {
  const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;
  if (isValueEmpty) {
    return __('Select an item');
  }
  if (Array.isArray(value)) {
    return value.length === 1 ? value[0] :
    // translators: %s: number of items selected (it will always be 2 or more items)
    sprintf(__('%s items selected'), value.length);
  }
  return value;
}
export function CustomSelect({
  children,
  defaultValue,
  label,
  onChange,
  size = 'default',
  value,
  renderSelectedValue,
  ...props
}) {
  const store = Ariakit.useSelectStore({
    setValue: nextValue => onChange?.(nextValue),
    defaultValue,
    value
  });
  const {
    value: currentValue
  } = store.useState();
  const computedRenderSelectedValue = renderSelectedValue !== null && renderSelectedValue !== void 0 ? renderSelectedValue : defaultRenderSelectedValue;
  return createElement(Fragment, null, createElement(Styled.CustomSelectLabel, {
    store: store
  }, label), createElement(Styled.CustomSelectButton, {
    ...props,
    size: size,
    hasCustomRenderProp: !!renderSelectedValue,
    store: store
  }, computedRenderSelectedValue(currentValue), createElement(Ariakit.SelectArrow, null)), createElement(Styled.CustomSelectPopover, {
    gutter: 12,
    store: store,
    sameWidth: true
  }, createElement(CustomSelectContext.Provider, {
    value: {
      store
    }
  }, children)));
}
export function CustomSelectItem({
  children,
  ...props
}) {
  const customSelectContext = useContext(CustomSelectContext);
  return createElement(Styled.CustomSelectItem, {
    store: customSelectContext?.store,
    ...props
  }, children !== null && children !== void 0 ? children : props.value, createElement(Ariakit.SelectItemCheck, null));
}
//# sourceMappingURL=index.js.map