'use strict';

var formatting = require('@transferwise/formatting');
var reactIntl = require('react-intl');
var Chevron = require('../../chevron/Chevron.js');
var CloseButton = require('../../common/closeButton/CloseButton.js');
var DateTrigger_messages = require('./DateTrigger.messages.js');
var React = require('react');
var OverlayIdProvider = require('../../provider/overlay/OverlayIdProvider.js');
var Body = require('../../body/Body.js');
var jsxRuntime = require('react/jsx-runtime');
var typography = require('../../common/propsValues/typography.js');
var position = require('../../common/propsValues/position.js');
var size = require('../../common/propsValues/size.js');

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

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