'use strict';

var clsx = require('clsx');
var React = require('react');
var BottomSheet = require('../../common/bottomSheet/BottomSheet.js');
var Option = require('../../common/Option/Option.js');
var Icons = require('@transferwise/icons');
var OverlayIdProvider = require('../../provider/overlay/OverlayIdProvider.js');
var List = require('../../listItem/List.js');
require('../../body/Body.js');
var jsxRuntime = require('react/jsx-runtime');

const AnimatedLabel = ({
  activeLabel,
  className,
  steps
}) => {
  const labelId = React.useId();
  const [showSteps, setShowSteps] = React.useState(false);
  function handleStepAction(onClick) {
    return () => {
      setShowSteps(false);
      onClick?.();
    };
  }
  return /*#__PURE__*/jsxRuntime.jsx(OverlayIdProvider.OverlayIdProvider, {
    open: showSteps,
    children: /*#__PURE__*/jsxRuntime.jsx(OverlayIdProvider.OverlayIdContext.Consumer, {
      children: overlayId => {
        return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
          children: [/*#__PURE__*/jsxRuntime.jsx("button", {
            type: "button",
            id: labelId,
            "aria-haspopup": "menu",
            "aria-controls": overlayId,
            "aria-expanded": showSteps,
            className: clsx.clsx('np-animated-label', 'btn-unstyled', 'np-text-body-large-bold', className),
            onClick: () => setShowSteps(true),
            children: steps.map(({
              label
            }, index) => {
              const isCurrentStep = activeLabel === index;
              const previousIndex = index - 1;
              return /*#__PURE__*/jsxRuntime.jsxs("div", {
                "aria-hidden": !isCurrentStep,
                className: clsx.clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {
                  'np-animated-label--active text-ellipsis': isCurrentStep
                }),
                children: [label, " ", /*#__PURE__*/jsxRuntime.jsx(Icons.ChevronDown, {})]
              }, previousIndex);
            })
          }), /*#__PURE__*/jsxRuntime.jsx(BottomSheet, {
            role: "menu",
            "aria-labelledby": labelId,
            open: showSteps,
            onClose: () => setShowSteps(false),
            children: /*#__PURE__*/jsxRuntime.jsx(List.List, {
              className: "m-b-0 p-a-1",
              children: steps.map((step, index) => {
                const isCurrentStep = activeLabel === index;
                const isDisabled = activeLabel < index;
                const itemId = `step-${index}`;
                return /*#__PURE__*/jsxRuntime.jsx(Option, {
                  id: itemId,
                  as: "li",
                  role: "menuitem",
                  decision: false,
                  className: clsx.clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {
                    clickable: !isDisabled
                  }),
                  title: step.label,
                  content: step.hoverLabel,
                  button: isCurrentStep ? /*#__PURE__*/jsxRuntime.jsx(Icons.Check, {
                    size: 24
                  }) : null,
                  "aria-current": isCurrentStep ? 'step' : false,
                  "aria-disabled": isDisabled,
                  disabled: isDisabled,
                  isContainerAligned: true,
                  ...(!isDisabled && {
                    tabIndex: 0,
                    onClick: handleStepAction(step.onClick),
                    onKeyDown: event => {
                      event.preventDefault();
                      if (event.code === 'Enter' || event.code === 'Space') {
                        handleStepAction(step.onClick)();
                      }
                    }
                  })
                }, itemId);
              })
            })
          })]
        });
      }
    })
  });
};

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