import { useRef, useState } from 'react';
import { clsx } from 'clsx';
import Option from '../common/Option/Option.mjs';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '../common/propsValues/control.mjs';
import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
import '../common/propsValues/size.mjs';
import '../common/propsValues/typography.mjs';
import '../common/propsValues/width.mjs';
import '../common/propsValues/type.mjs';
import '../common/propsValues/dateMode.mjs';
import '../common/propsValues/monthFormat.mjs';
import { Position } from '../common/propsValues/position.mjs';
import '../common/propsValues/layouts.mjs';
import '../common/propsValues/status.mjs';
import '../common/propsValues/sentiment.mjs';
import '../common/propsValues/profileType.mjs';
import '../common/propsValues/variant.mjs';
import '../common/propsValues/scroll.mjs';
import '../common/propsValues/markdownNodeType.mjs';
import '../common/fileType.mjs';
import { Plus, ChevronDown } from '@transferwise/icons';
import { useIntl } from 'react-intl';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import Section from '../section/Section.mjs';
import { Header } from '../header/Header.mjs';
import NavigationOption from '../navigationOption/NavigationOption.mjs';
import NavigationOptionList from '../navigationOptionsList/NavigationOptionsList.mjs';
import { useInputAttributes } from '../inputs/contexts.mjs';
import messages from './SelectOption.messages.mjs';
import ResponsivePanel from '../common/responsivePanel/ResponsivePanel.mjs';
import { useScreenSize } from '../common/hooks/useScreenSize.mjs';

function SelectOption({
  selected = undefined,
  options,
  onChange,
  placeholder,
  disabled,
  ...props
}) {
  const intl = useIntl();
  const rootRef = useRef(null);
  const [showOptions, setShowOptions] = useState(false);
  const hasSelected = selected !== undefined;
  const isLargeScreen = useScreenSize(Breakpoint.SMALL);
  const inputAttributes = useInputAttributes();
  const ariaLabelledBy = props['aria-labelledby'] ?? inputAttributes?.['aria-labelledby'];
  function handleOnClick(showOptionsStatus) {
    return () => {
      setShowOptions(showOptionsStatus);
    };
  }
  function handleOnChange(data) {
    return () => {
      setShowOptions(false);
      onChange(data);
    };
  }
  function getOptions(isLargeScreen = false) {
    return /*#__PURE__*/jsx("div", {
      className: clsx({
        'np-select-option-list': isLargeScreen
      }),
      children: options.map((optionsSection, index) => /*#__PURE__*/jsxs(Section, {
        className: clsx({
          'p-x-2 p-y-1': isLargeScreen
        }),
        children: [optionsSection.title && /*#__PURE__*/jsx(Header, {
          title: optionsSection.title
        }), /*#__PURE__*/jsx(NavigationOptionList, {
          children: optionsSection.options.map((option, index) => {
            return /*#__PURE__*/jsx(NavigationOption, {
              isContainerAligned: !isLargeScreen,
              showMediaCircle: true,
              showMediaAtAllSizes: true,
              onClick: handleOnChange(option),
              ...option
            }, index);
          })
        })]
      }, index))
    });
  }
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsx(Option, {
      ref: rootRef,
      as: "div",
      showMediaAtAllSizes: true,
      disabled: disabled,
      decision: false,
      media: hasSelected ? selected.media : placeholder.media ?? /*#__PURE__*/jsx(Plus, {
        size: 24
      }),
      title: (hasSelected ? selected : placeholder).title,
      content: (hasSelected ? selected : placeholder).content,
      className: clsx('np-select-option', 'clickable', hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder', props.className),
      button: /*#__PURE__*/jsx("button", {
        ...inputAttributes,
        type: "button",
        disabled: disabled,
        "aria-labelledby": ariaLabelledBy,
        "aria-haspopup": "dialog",
        "aria-expanded": showOptions,
        className: hasSelected ? 'btn-unstyled' : 'np-action-btn',
        "aria-label": hasSelected ? undefined : props['aria-label'],
        onClick: handleOnClick(true),
        children: hasSelected ? /*#__PURE__*/jsx(ChevronDown, {
          title: intl.formatMessage(messages.selectedActionLabel)
        }) : placeholder.actionLabel || intl.formatMessage(messages.actionLabel)
      })
    }), /*#__PURE__*/jsx(ResponsivePanel, {
      anchorWidth: true,
      altAxis: true,
      anchorRef: rootRef,
      open: showOptions,
      position: Position.BOTTOM,
      onClose: handleOnClick(false),
      children: getOptions(isLargeScreen)
    })]
  });
}

export { SelectOption as default };
//# sourceMappingURL=SelectOption.mjs.map
