import { formatDate } from '@transferwise/formatting';
import { useIntl } from 'react-intl';
import Chevron from '../../chevron/Chevron.mjs';
import '../../common/theme.mjs';
import '../../common/direction.mjs';
import '../../common/propsValues/control.mjs';
import '../../common/propsValues/breakpoint.mjs';
import { Size } from '../../common/propsValues/size.mjs';
import { Typography } from '../../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 { CloseButton } from '../../common/closeButton/CloseButton.mjs';
import dateTriggerMessages from './DateTrigger.messages.mjs';
import { useId, useContext } from 'react';
import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider.mjs';
import Body from '../../body/Body.mjs';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';

const DateTrigger = ({
  selectedDate,
  size = Size.MEDIUM,
  placeholder,
  label,
  monthFormat,
  disabled,
  ariaLabelledBy,
  onClick,
  onClear
}) => {
  const {
    locale,
    formatMessage
  } = useIntl();
  const valueIdPrefix = useId();
  const overlayId = useContext(OverlayIdContext);
  const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsxs("button", {
      "aria-haspopup": "dialog",
      "aria-expanded": overlayId != null,
      "aria-controls": overlayId,
      "aria-labelledby": ariaLabelIds.filter(Boolean).join(' '),
      className: `btn btn-${size} btn-input np-date-trigger`,
      disabled: disabled,
      type: "button",
      onClick: onClick,
      children: [label && /*#__PURE__*/jsx(Body, {
        as: "span",
        className: "np-date-trigger-label m-r-1",
        id: ariaLabelIds[1],
        children: label
      }), selectedDate ? /*#__PURE__*/jsx(Body, {
        as: "span",
        type: Typography.BODY_LARGE,
        id: ariaLabelIds[2],
        children: formatDate(selectedDate, locale, {
          day: 'numeric',
          month: monthFormat,
          year: 'numeric'
        })
      }) : /*#__PURE__*/jsx("span", {
        className: "form-control-placeholder visible-xs-inline visible-sm-inline visible-md-inline visible-lg-inline visible-xl-inline",
        id: ariaLabelIds[2],
        children: placeholder
      }), !onClear ? /*#__PURE__*/jsx(Chevron, {
        orientation: Position.BOTTOM,
        disabled: disabled
      }) : null]
    }), onClear ? /*#__PURE__*/jsxs(Fragment, {
      children: [/*#__PURE__*/jsx("div", {
        className: "clearfix"
      }), /*#__PURE__*/jsx("span", {
        className: "input-group-addon",
        children: /*#__PURE__*/jsx(CloseButton, {
          className: `clear-btn clear-btn--${size}`,
          "aria-label": `${formatMessage(dateTriggerMessages.ariaLabel)} ${label}`,
          size: Size.SMALL,
          onClick: event => {
            event.stopPropagation();
            event.preventDefault();
            onClear();
          }
        })
      })]
    }) : null]
  });
};

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