'use strict';

var clsx = require('clsx');
require('react');
require('../common/theme.js');
require('../common/direction.js');
require('../common/propsValues/control.js');
require('../common/propsValues/breakpoint.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');
var position = require('../common/propsValues/position.js');
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/icons');
require('react-intl');
require('../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');
require('@transferwise/neptune-validation');
var useDirection = require('../common/hooks/useDirection/useDirection.js');
var Tooltip = require('../tooltip/Tooltip.js');
var deviceDetection = require('./deviceDetection.js');

function clamp(from, to, value) {
  return Math.max(Math.min(to, value), from);
}
/**
 * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.
 * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants
 */
const Stepper = ({
  steps,
  activeStep = 0,
  className
}) => {
  const {
    isRTL
  } = useDirection.useDirection();
  if (steps.length === 0) {
    return null;
  }
  const activeStepIndex = clamp(0, steps.length - 1, activeStep);
  const stepPercentage = 1 / (steps.length - 1);
  const percentageCompleted = activeStepIndex / (steps.length - 1);
  const getProgressWidth = () => {
    if (percentageCompleted === 0) {
      return '0px';
    }
    /**
     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders
     * which are used for progress vertical delimiter.
     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.
     */
    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;
  };
  const renderStep = (step, index) => {
    const active = index === activeStepIndex;
    const clickable = step.onClick && !active;
    const labelButton = clickable ? /*#__PURE__*/jsxRuntime.jsx("button", {
      type: "button",
      className: "btn-unstyled tw-stepper__step-label",
      onClick: () => clickable && step.onClick?.(),
      children: /*#__PURE__*/jsxRuntime.jsx("small", {
        children: step.label
      })
    }) : /*#__PURE__*/jsxRuntime.jsx("span", {
      className: "tw-stepper__step-label",
      children: step.label
    });
    return /*#__PURE__*/jsxRuntime.jsx("li", {
      className: clsx.clsx('hidden-xs', 'tw-stepper__step', active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
      "aria-current": active ? 'step' : false,
      style: isRTL ? {
        right: `${index * stepPercentage * 100}%`
      } : {
        left: `${index * stepPercentage * 100}%`
      },
      children: step.hoverLabel && !deviceDetection.isTouchDevice() ? /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
        position: position.Position.BOTTOM,
        label: step.hoverLabel,
        children: labelButton
      }) : labelButton
    }, index);
  };
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: clsx.clsx('tw-stepper', className),
    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
      className: "progress",
      children: /*#__PURE__*/jsxRuntime.jsx("div", {
        className: "progress-bar",
        style: {
          width: getProgressWidth()
        }
      })
    }), /*#__PURE__*/jsxRuntime.jsx("ol", {
      className: "tw-stepper-steps p-t-1 m-b-0",
      children: steps.map(renderStep)
    })]
  });
};

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