'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var Body = require('../body/Body.js');
var Label = require('../label/Label.js');
var clsx = require('clsx');
var framerMotion = require('framer-motion');
var React = require('react');
var CurrencySelector = require('./currencySelector/CurrencySelector.js');
var AmountInput = require('./amountInput/AmountInput.js');
var Chevron = require('./chevron/Chevron.js');
var InlinePrompt = require('../prompt/InlinePrompt/InlinePrompt.js');
var jsxRuntime = require('react/jsx-runtime');

function ExpressiveMoneyInput({
  label,
  currency,
  currencySelector = {
    options: []
  },
  amount,
  onAmountChange,
  className,
  inlinePrompt,
  showChevron,
  autoFocus,
  loading,
  onFocusChange
}) {
  const inputId = React.useId();
  const labelId = React.useId();
  const customAlertId = React.useId();
  const currencyId = React.useId();
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: clsx.clsx('wds-expressive-money-input', className),
    children: [/*#__PURE__*/jsxRuntime.jsx(Label.Label, {
      id: labelId,
      htmlFor: inputId,
      className: clsx.clsx('m-b-1', 'font-weight-normal'),
      children: label
    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: clsx.clsx('d-flex'),
      role: "group",
      "aria-labelledby": labelId,
      ...(inlinePrompt ? {
        'aria-describedby': customAlertId
      } : {}),
      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
        className: "wds-expressive-money-input-currency-selector",
        children: currencySelector.customRender?.({
          id: currencyId,
          labelId
        }) ?? /*#__PURE__*/jsxRuntime.jsx(CurrencySelector.CurrencySelector, {
          id: currencyId,
          labelId: labelId,
          currency: currency,
          ...currencySelector
        })
      }), /*#__PURE__*/jsxRuntime.jsx(AmountInput.AmountInput, {
        id: inputId,
        describedById: currencyId,
        amount: amount,
        currency: currency
        // eslint-disable-next-line jsx-a11y/no-autofocus
        ,
        autoFocus: autoFocus,
        loading: loading,
        onChange: onAmountChange,
        onFocusChange: onFocusChange
      }), /*#__PURE__*/jsxRuntime.jsx("div", {
        className: clsx.clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron'),
        children: /*#__PURE__*/jsxRuntime.jsx(Chevron.Chevron, {
          shouldShow: Boolean(showChevron)
        })
      })]
    }), /*#__PURE__*/jsxRuntime.jsx(framerMotion.AnimatePresence, {
      initial: false,
      children: inlinePrompt && /*#__PURE__*/jsxRuntime.jsx("div", {
        className: clsx.clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1'),
        children: /*#__PURE__*/jsxRuntime.jsx(framerMotion.motion.div, {
          initial: {
            opacity: 0,
            height: 0
          },
          animate: {
            opacity: 1,
            height: 'auto',
            transition: {
              delay: 0.75,
              duration: 0.3
            }
          },
          exit: {
            opacity: 0,
            height: 0
          },
          children: inlinePrompt.sentiment && Object.keys(inlinePrompt.sentiment).length > 0 ? /*#__PURE__*/jsxRuntime.jsx(InlinePrompt.InlinePrompt, {
            id: customAlertId,
            media: inlinePrompt.media,
            sentiment: inlinePrompt.sentiment,
            children: inlinePrompt.message
          }) : /*#__PURE__*/jsxRuntime.jsx(Body.default, {
            children: inlinePrompt.message
          })
        }, customAlertId)
      })
    })]
  });
}

exports.default = ExpressiveMoneyInput;
//# sourceMappingURL=ExpressiveMoneyInput.js.map
