import { clsx } from 'clsx';
import 'react';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '../common/propsValues/control.mjs';
import '../common/propsValues/breakpoint.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 { Position } from '../common/propsValues/position.mjs';
import '../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/icons';
import 'react-intl';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import '@transferwise/neptune-validation';
import { useDirection } from '../common/hooks/useDirection/useDirection.mjs';
import Tooltip from '../tooltip/Tooltip.mjs';
import { isTouchDevice } from './deviceDetection.mjs';

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();
  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__*/jsx("button", {
      type: "button",
      className: "btn-unstyled tw-stepper__step-label",
      onClick: () => clickable && step.onClick?.(),
      children: /*#__PURE__*/jsx("small", {
        children: step.label
      })
    }) : /*#__PURE__*/jsx("span", {
      className: "tw-stepper__step-label",
      children: step.label
    });
    return /*#__PURE__*/jsx("li", {
      className: 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 && !isTouchDevice() ? /*#__PURE__*/jsx(Tooltip, {
        position: Position.BOTTOM,
        label: step.hoverLabel,
        children: labelButton
      }) : labelButton
    }, index);
  };
  return /*#__PURE__*/jsxs("div", {
    className: clsx('tw-stepper', className),
    children: [/*#__PURE__*/jsx("div", {
      className: "progress",
      children: /*#__PURE__*/jsx("div", {
        className: "progress-bar",
        style: {
          width: getProgressWidth()
        }
      })
    }), /*#__PURE__*/jsx("ol", {
      className: "tw-stepper-steps p-t-1 m-b-0",
      children: steps.map(renderStep)
    })]
  });
};

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