import { clsx } from 'clsx';
import { useIntl } from 'react-intl';
import { Breakpoint } from '@transferwise/neptune-tokens';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '../common/propsValues/control.mjs';
import '../common/propsValues/size.mjs';
import '../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 '../common/propsValues/position.mjs';
import { Layout } from '../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 '@transferwise/formatting';
import { CloseButton } from '../common/closeButton/CloseButton.mjs';
import 'react';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import FlowHeader from '../common/flowHeader/FlowHeader.mjs';
import Logo from '../logo/Logo.mjs';
import Stepper from '../stepper/Stepper.mjs';
import { useScreenSize } from '../common/hooks/useScreenSize.mjs';
import messages from './FlowNavigation.messages.mjs';
import AnimatedLabel from './animatedLabel/AnimatedLabel.mjs';
import IconButton from '../iconButton/IconButton.mjs';
import { ArrowLeft } from '@transferwise/icons';

const FlowNavigation = ({
  activeStep = 0,
  avatar,
  logo = /*#__PURE__*/jsx(Logo, {}),
  done = false,
  onClose,
  onGoBack,
  steps
}) => {
  const intl = useIntl();
  const closeButton = onClose != null && /*#__PURE__*/jsx(CloseButton, {
    size: "lg",
    onClick: onClose
  });
  const screenSm = useScreenSize(Breakpoint.SMALL);
  const screenLg = useScreenSize(Breakpoint.LARGE);
  const newAvatar = done ? null : avatar;
  const displayGoBack = onGoBack != null && activeStep > 0;
  return /*#__PURE__*/jsx("div", {
    className: clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {
      'np-flow-navigation--border-bottom': !done
    }),
    children: /*#__PURE__*/jsx(FlowHeader, {
      className: clsx('np-flow-navigation__content p-x-3', screenSm == null ? 'np-flow-navigation--hidden' : {
        'np-flow-navigation--xs-max': !screenSm,
        // Size switches on parent container which may or may not have the same size as the window.
        'np-flow-navigation--sm': screenSm,
        'np-flow-navigation--lg': screenLg
      }),
      leftContent: /*#__PURE__*/jsxs(Fragment, {
        children: [!screenSm && displayGoBack ? /*#__PURE__*/jsx(IconButton, {
          size: 40,
          priority: "tertiary",
          type: "default",
          "aria-label": intl.formatMessage(messages.back),
          onClick: onGoBack,
          children: /*#__PURE__*/jsx(ArrowLeft, {})
        }) : /*#__PURE__*/jsx("div", {
          className: "np-flow-header__left",
          children: logo
        }), !screenSm && !done && /*#__PURE__*/jsx(AnimatedLabel, {
          className: "m-x-1",
          steps: steps,
          activeLabel: activeStep
        })]
      }),
      rightContent: /*#__PURE__*/jsxs("div", {
        className: "np-flow-header__right d-flex align-items-center justify-content-end order-2--lg",
        children: [newAvatar, newAvatar && closeButton && /*#__PURE__*/jsx("span", {
          className: "m-x-1"
        }), closeButton]
      }),
      bottomContent: !done && steps.length > 0 ? /*#__PURE__*/jsx(Stepper, {
        activeStep: activeStep,
        steps: steps,
        className: clsx('np-flow-navigation__stepper')
      }) : null,
      layout: !screenLg ? Layout.VERTICAL : Layout.HORIZONTAL
    })
  });
};

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