'use strict';

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

var clsx = require('clsx');
var reactIntl = require('react-intl');
var neptuneTokens = require('@transferwise/neptune-tokens');
require('../common/theme.js');
require('../common/direction.js');
require('../common/propsValues/control.js');
require('../common/propsValues/size.js');
require('../common/propsValues/typography.js');
require('../common/propsValues/width.js');
require('../common/propsValues/type.js');
require('../common/propsValues/dateMode.js');
require('../common/propsValues/monthFormat.js');
require('../common/propsValues/position.js');
var layouts = require('../common/propsValues/layouts.js');
require('../common/propsValues/status.js');
require('../common/propsValues/sentiment.js');
require('../common/propsValues/profileType.js');
require('../common/propsValues/variant.js');
require('../common/propsValues/scroll.js');
require('../common/propsValues/markdownNodeType.js');
require('../common/fileType.js');
require('@transferwise/formatting');
var CloseButton = require('../common/closeButton/CloseButton.js');
require('react');
var jsxRuntime = require('react/jsx-runtime');
var FlowHeader = require('../common/flowHeader/FlowHeader.js');
var Logo = require('../logo/Logo.js');
var Stepper = require('../stepper/Stepper.js');
var Container = require('../container/Container.js');
var useScreenSize = require('../common/hooks/useScreenSize.js');
var FlowNavigation_messages = require('./FlowNavigation.messages.js');
var AnimatedLabel = require('./animatedLabel/AnimatedLabel.js');
var IconButton = require('../iconButton/IconButton.js');
var icons = require('@transferwise/icons');

const defaultLogo = /*#__PURE__*/jsxRuntime.jsx(Logo.default, {});
const FlowNavigation = ({
  activeStep = 0,
  avatar,
  logo = defaultLogo,
  done = false,
  onClose,
  onGoBack,
  steps,
  composable = false,
  showBottomBorder = true
}) => {
  const intl = reactIntl.useIntl();
  const screenSm = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.SMALL);
  const screenLg = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.LARGE);
  const closeButton = onClose != null && /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
    size: "lg",
    onClick: onClose
  });
  const newAvatar = done ? null : avatar;
  const displayGoBack = onGoBack != null && activeStep > 0;
  const flowHeaderContent = /*#__PURE__*/jsxRuntime.jsx(FlowHeader.default, {
    className: clsx.clsx('np-flow-navigation__content', !composable && '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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
      children: [!screenSm && displayGoBack ? /*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
        size: 40,
        priority: "tertiary",
        type: "default",
        "aria-label": intl.formatMessage(FlowNavigation_messages.default.back),
        onClick: onGoBack,
        children: /*#__PURE__*/jsxRuntime.jsx(icons.ArrowLeft, {})
      }) : /*#__PURE__*/jsxRuntime.jsx("div", {
        className: "np-flow-header__left",
        children: logo
      }), !screenSm && !done && steps && steps.length > 0 && /*#__PURE__*/jsxRuntime.jsx(AnimatedLabel.default, {
        className: "m-x-1",
        steps: steps,
        activeLabel: activeStep
      })]
    }),
    rightContent: /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "np-flow-header__right d-flex align-items-center justify-content-end order-2--lg",
      children: [newAvatar, newAvatar && closeButton && /*#__PURE__*/jsxRuntime.jsx("span", {
        className: "m-x-1"
      }), closeButton]
    }),
    bottomContent: !done && steps && steps.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(Stepper.default, {
      activeStep: activeStep,
      steps: steps,
      className: clsx.clsx('np-flow-navigation__stepper')
    }) : null,
    layout: !screenLg ? layouts.Layout.VERTICAL : layouts.Layout.HORIZONTAL
  });
  if (composable) {
    return /*#__PURE__*/jsxRuntime.jsx(Container.default, {
      size: "fluid",
      className: clsx.clsx('np-flow-navigation np-flow-navigation--composable', {
        'np-flow-navigation--border-bottom': showBottomBorder
      }),
      children: flowHeaderContent
    });
  }
  return /*#__PURE__*/jsxRuntime.jsx("div", {
    className: clsx.clsx('np-flow-navigation p-y-3', {
      'np-flow-navigation--border-bottom': !done
    }),
    children: flowHeaderContent
  });
};

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