'use strict';

var React = require('react');
var clsx = require('clsx');
var Option = require('../common/Option/Option.js');
require('../common/theme.js');
require('../common/direction.js');
require('../common/propsValues/control.js');
var breakpoint = require('../common/propsValues/breakpoint.js');
require('../common/propsValues/size.js');
require('../common/propsValues/typography.js');
require('../common/propsValues/width.js');
require('../common/propsValues/type.js');
require('../common/propsValues/dateMode.js');
require('../common/propsValues/monthFormat.js');
var position = require('../common/propsValues/position.js');
require('../common/propsValues/layouts.js');
require('../common/propsValues/status.js');
require('../common/propsValues/sentiment.js');
require('../common/propsValues/profileType.js');
require('../common/propsValues/variant.js');
require('../common/propsValues/scroll.js');
require('../common/propsValues/markdownNodeType.js');
require('../common/fileType.js');
var icons = require('@transferwise/icons');
var reactIntl = require('react-intl');
require('../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');
var Section = require('../section/Section.js');
var Header = require('../header/Header.js');
var NavigationOption = require('../navigationOption/NavigationOption.js');
var NavigationOptionsList = require('../navigationOptionsList/NavigationOptionsList.js');
var contexts = require('../inputs/contexts.js');
var SelectOption_messages = require('./SelectOption.messages.js');
var ResponsivePanel = require('../common/responsivePanel/ResponsivePanel.js');
var useScreenSize = require('../common/hooks/useScreenSize.js');

function SelectOption({
  selected = undefined,
  options,
  onChange,
  placeholder,
  disabled,
  ...props
}) {
  const intl = reactIntl.useIntl();
  const rootRef = React.useRef(null);
  const [showOptions, setShowOptions] = React.useState(false);
  const hasSelected = selected !== undefined;
  const isLargeScreen = useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
  const inputAttributes = contexts.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__*/jsxRuntime.jsx("div", {
      className: clsx.clsx({
        'np-select-option-list': isLargeScreen
      }),
      children: options.map((optionsSection, index) => /*#__PURE__*/jsxRuntime.jsxs(Section, {
        className: clsx.clsx({
          'p-x-2 p-y-1': isLargeScreen
        }),
        children: [optionsSection.title && /*#__PURE__*/jsxRuntime.jsx(Header.Header, {
          title: optionsSection.title
        }), /*#__PURE__*/jsxRuntime.jsx(NavigationOptionsList, {
          children: optionsSection.options.map((option, index) => {
            return /*#__PURE__*/jsxRuntime.jsx(NavigationOption, {
              isContainerAligned: !isLargeScreen,
              showMediaCircle: true,
              showMediaAtAllSizes: true,
              onClick: handleOnChange(option),
              ...option
            }, index);
          })
        })]
      }, index))
    });
  }
  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
    children: [/*#__PURE__*/jsxRuntime.jsx(Option, {
      ref: rootRef,
      as: "div",
      showMediaAtAllSizes: true,
      disabled: disabled,
      decision: false,
      media: hasSelected ? selected.media : placeholder.media ?? /*#__PURE__*/jsxRuntime.jsx(icons.Plus, {
        size: 24
      }),
      title: (hasSelected ? selected : placeholder).title,
      content: (hasSelected ? selected : placeholder).content,
      className: clsx.clsx('np-select-option', 'clickable', hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder', props.className),
      button: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(icons.ChevronDown, {
          title: intl.formatMessage(SelectOption_messages.selectedActionLabel)
        }) : placeholder.actionLabel || intl.formatMessage(SelectOption_messages.actionLabel)
      })
    }), /*#__PURE__*/jsxRuntime.jsx(ResponsivePanel, {
      anchorWidth: true,
      altAxis: true,
      anchorRef: rootRef,
      open: showOptions,
      position: position.Position.BOTTOM,
      onClose: handleOnClick(false),
      children: getOptions(isLargeScreen)
    })]
  });
}

module.exports = SelectOption;
//# sourceMappingURL=SelectOption.js.map
