import Body from '../body/Body.mjs';
import { Label as LabelNamespace } from '../label/Label.mjs';
import { clsx } from 'clsx';
import { AnimatePresence, motion } from 'framer-motion';
import { useId } from 'react';
import { CurrencySelector } from './currencySelector/CurrencySelector.mjs';
import { AmountInput } from './amountInput/AmountInput.mjs';
import { Chevron } from './chevron/Chevron.mjs';
import { InlinePrompt } from '../prompt/InlinePrompt/InlinePrompt.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';

function ExpressiveMoneyInput({
  label,
  currency,
  currencySelector = {
    options: []
  },
  amount,
  onAmountChange,
  className,
  inlinePrompt,
  showChevron,
  autoFocus,
  loading,
  onFocusChange
}) {
  const inputId = useId();
  const labelId = useId();
  const customAlertId = useId();
  const currencyId = useId();
  return /*#__PURE__*/jsxs("div", {
    className: clsx('wds-expressive-money-input', className),
    children: [/*#__PURE__*/jsx(LabelNamespace, {
      id: labelId,
      htmlFor: inputId,
      className: clsx('m-b-1', 'font-weight-normal'),
      children: label
    }), /*#__PURE__*/jsxs("div", {
      className: clsx('d-flex'),
      role: "group",
      "aria-labelledby": labelId,
      ...(inlinePrompt ? {
        'aria-describedby': customAlertId
      } : {}),
      children: [/*#__PURE__*/jsx("div", {
        className: "wds-expressive-money-input-currency-selector",
        children: currencySelector.customRender?.({
          id: currencyId,
          labelId
        }) ?? /*#__PURE__*/jsx(CurrencySelector, {
          id: currencyId,
          labelId: labelId,
          currency: currency,
          ...currencySelector
        })
      }), /*#__PURE__*/jsx(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__*/jsx("div", {
        className: clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron'),
        children: /*#__PURE__*/jsx(Chevron, {
          shouldShow: Boolean(showChevron)
        })
      })]
    }), /*#__PURE__*/jsx(AnimatePresence, {
      initial: false,
      children: inlinePrompt && /*#__PURE__*/jsx("div", {
        className: clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1'),
        children: /*#__PURE__*/jsx(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__*/jsx(InlinePrompt, {
            id: customAlertId,
            media: inlinePrompt.media,
            sentiment: inlinePrompt.sentiment,
            children: inlinePrompt.message
          }) : /*#__PURE__*/jsx(Body, {
            children: inlinePrompt.message
          })
        }, customAlertId)
      })
    })]
  });
}

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