import{slicedToArray as e,toConsumableArray as t,defineProperty as i}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as n}from"es-toolkit";import{getStyle as a}from"../../../../helpers/typesciptCssModulesHelper.js";import{getTestId as o,ComponentDefaultTestId as r}from"../../../../tests/testIds.js";import l from"classnames";import{keyCodes as s}from"../../../../constants/keyCodes.js";import c,{useState as m,useRef as d,useCallback as p,useEffect as u,useMemo as f}from"react";import{SwitchTransition as v,CSSTransition as y}from"react-transition-group";import _ from"../../../../hooks/useEventListener/index.js";import E from"../../../../hooks/useKeyEvent/index.js";import{Icon as b}from"@vibe/icon/mockedClassNames";import{Check as x}from"@vibe/icons";import N from"../../../Divider/Divider.js";import{NOOP as k}from"../../../../utils/function-utils.js";import S from"../../../HiddenText/HiddenText.js";import{Clickable as C}from"@vibe/clickable/mockedClassNames";import T from"./StepIndicator.module.scss.js";var I=[s.ENTER,s.SPACE],j=function(e){var t=e.fulfilledStepIcon,i=e.fulfilledStepIconType;return"fulfilled"!==e.status||e.isFulfilledStepDisplayNumber?c.createElement(c.Fragment,null,e.stepNumber):c.createElement(b,{icon:t,className:l(T.numberContainerTextCheckIcon),iconType:i,ignoreFocusStyle:!0,ariaHidden:!0})},A=function(s){var b=s.stepComponentClassName,A=s.stepNumber,g=void 0===A?1:A,D=s.status,w=void 0===D?"pending":D,F=s.titleText,H=void 0===F?"Heading text":F,h=s.subtitleText,P=void 0===h?"Subtitle text":h,L=s.type,z=void 0===L?"primary":L,B=s.fulfilledStepIcon,R=void 0===B?x:B,V=s.fulfilledStepIconType,K=void 0===V?"svg":V,M=s.isFulfilledStepDisplayNumber,O=void 0!==M&&M,q=s.onClick,G=void 0===q?k:q,J=s.isFollowedByDivider,Q=void 0!==J&&J,U=s.stepDividerClassName,W=s.isVertical,X=void 0!==W&&W,Y=s.id,Z=s.size,$=void 0===Z?"regular":Z,ee=s["data-testid"],te=m(!1),ie=e(te,2),ne=ie[0],ae=ie[1],oe=d(null),re=d(w),le=p((function(){ae(!0)}),[ae]),se=p((function(){ae(!1)}),[ae]),ce=p((function(){return re.current!==w}),[re,w]),me=p((function(){G&&G(g)}),[G,g]);_({eventName:"animationend",callback:se,ref:oe}),E({keys:I,callback:me,ref:oe}),u((function(){ce()&&le()}),[w,ce,le]),u((function(){re.current=w}),[w]);var de=f((function(){return"Step ".concat(g,": ").concat(H," - ").concat(P,", status: ").concat(w)}),[w,H,g,P]),pe=function(e){return[a(T,n(e||"indicator")),a(T,n("type-".concat(z).concat(e))),a(T,n("status-".concat(w).concat(e))),a(T,n("size-".concat($).concat(e)))]};return c.createElement(C,{tabIndex:"-1",elementType:"li",className:l.apply(void 0,t(pe("")).concat([b,i(i(i({},T.withAnimation,ne),T.clickable,G),T.textPlacementVertical,X)])),"aria-label":de,onClick:me,"data-testid":ee||o(r.STEP_INDICATOR,Y)},c.createElement("div",{className:l.apply(void 0,t(pe("__number-divider-container")))},c.createElement("div",{className:l.apply(void 0,t(pe("__number-container"))),ref:oe,tabIndex:0,role:"button"},c.createElement(v,{mode:"out-in"},c.createElement(y,{classNames:{enter:T.swapEnter,enterActive:T.swapEnterActive,exit:T.swapExit,exitActive:T.swapExitActive},addEndListener:function(e,t){e.addEventListener("transitionend",t,!1)},key:w},c.createElement("span",{className:l.apply(void 0,t(pe("__number-container__text")))},c.createElement(j,{fulfilledStepIcon:R,fulfilledStepIconType:K,isFulfilledStepDisplayNumber:O,stepNumber:g,status:w}))))),Q&&X&&c.createElement(N,{className:l(T.divider,U)})),c.createElement("div",{className:l.apply(void 0,t(pe("__text-container")))},c.createElement("div",{className:l.apply(void 0,t(pe("__text-container__title")))},c.createElement(S,{text:w})," ",c.createElement("span",{className:l.apply(void 0,t(pe("__text-container__title__text")))},H)),"compact"!==$?c.createElement("span",{className:l.apply(void 0,t(pe("__text-container__subtitle__text")))},P):null))};export{A as default};
//# sourceMappingURL=StepIndicator.js.map
