import { clsx } from 'clsx';
import { useId, useState } from 'react';
import BottomSheet from '../../common/bottomSheet/BottomSheet.mjs';
import Option from '../../common/Option/Option.mjs';
import { ChevronDown, Check } from '@transferwise/icons';
import { OverlayIdProvider, OverlayIdContext } from '../../provider/overlay/OverlayIdProvider.mjs';
import { List } from '../../listItem/List.mjs';
import '../../body/Body.mjs';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

const AnimatedLabel = ({
  activeLabel,
  className,
  steps
}) => {
  const labelId = useId();
  const [showSteps, setShowSteps] = useState(false);
  function handleStepAction(onClick) {
    return () => {
      setShowSteps(false);
      onClick?.();
    };
  }
  return /*#__PURE__*/jsx(OverlayIdProvider, {
    open: showSteps,
    children: /*#__PURE__*/jsx(OverlayIdContext.Consumer, {
      children: overlayId => {
        return /*#__PURE__*/jsxs(Fragment, {
          children: [/*#__PURE__*/jsx("button", {
            type: "button",
            id: labelId,
            "aria-haspopup": "menu",
            "aria-controls": overlayId,
            "aria-expanded": showSteps,
            className: 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__*/jsxs("div", {
                "aria-hidden": !isCurrentStep,
                className: clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {
                  'np-animated-label--active text-ellipsis': isCurrentStep
                }),
                children: [label, " ", /*#__PURE__*/jsx(ChevronDown, {})]
              }, previousIndex);
            })
          }), /*#__PURE__*/jsx(BottomSheet, {
            role: "menu",
            "aria-labelledby": labelId,
            open: showSteps,
            onClose: () => setShowSteps(false),
            children: /*#__PURE__*/jsx(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__*/jsx(Option, {
                  id: itemId,
                  as: "li",
                  role: "menuitem",
                  decision: false,
                  className: 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__*/jsx(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);
              })
            })
          })]
        });
      }
    })
  });
};

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