import{slicedToArray as e,toConsumableArray as t,defineProperty as n}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import{keyCodes as a}from"../../../../constants/keyCodes.js";import i,{useState as c,useRef as o,useCallback as l,useEffect as r,useMemo as s}from"react";import p from"classnames";import"prop-types";import{SwitchTransition as m,CSSTransition as u}from"react-transition-group";import d from"../../../../hooks/useKeyEvent/index.js";import f from"../../../Icon/Icon.js";import _ from"../../../Icon/Icons/components/Check.js";import y from"../../../Divider/Divider.js";import{NOOP as b}from"../../../../utils/function-utils.js";import v from"../../../HiddenText/HiddenText.js";import N from"../../../Clickable/Clickable.js";import{STEP_STATUSES as E,MULTI_STEP_TYPES as x}from"../../MultiStepConstants.js";import{baseClassName as I}from"./StepIndicatorConstants.js";import"./StepIndicator.scss.js";var S=[a.ENTER,a.SPACE],C=function(e){var t=e.fulfilledStepIconType;return e.status!==E.FULFILLED||e.isFulfilledStepDisplayNumber?e.stepNumber:i.createElement(f,{icon:e.fulfilledStepIcon,className:"".concat(I,"__number-container__text__check-icon"),iconLabel:E.FULFILLED,iconType:t,ignoreFocusStyle:!0,clickable:!1,ariaHidden:!0})},k=function(a){var f,_=a.stepComponentClassName,b=a.stepNumber,E=a.status,x=a.titleText,k=a.subtitleText,T=a.type,j=a.fulfilledStepIcon,D=a.fulfilledStepIconType,F=a.isFulfilledStepDisplayNumber,L=a.onClick,H=a.isFollowedByDivider,P=a.stepDividerClassName,g=a.isVertical,h=c(!1),A=e(h,2),w=A[0],R=A[1],V=o(null),B=o(E),G=l((function(){R(!0)}),[R]),M=l((function(){R(!1)}),[R]),U=l((function(){return B.current!==E}),[B,E]),K=l((function(){L&&L(b)}),[L,b]);d({eventName:"animationend",callback:M,ref:V}),d({keys:S,callback:K,ref:V}),r((function(){U()&&G()}),[E,U,G]),r((function(){B.current=E}),[E]);var Y=s((function(){return"Step ".concat(b,": ").concat(x," - ").concat(k,", status: ").concat(E)}),[E,x,b,k]),q="".concat(I,"--type-").concat(T),z="".concat(I,"--status-").concat(E),J="".concat(I,"--with-animation"),O=function(e){return["".concat(I).concat(e),"".concat(q).concat(e),"".concat(z).concat(e)]};return i.createElement(N,{tabIndex:"-1",elementType:"li",className:p.apply(void 0,t(O("")).concat([_,(f={},n(f,J,w),n(f,"clickable",L),n(f,"".concat(I,"--text-placement-vertical"),g),f)])),"aria-label":Y,onClick:K},i.createElement("div",{className:p.apply(void 0,t(O("__number-divider-container")))},i.createElement("div",{className:p.apply(void 0,t(O("__number-container"))),ref:V,tabIndex:"0",role:"button"},i.createElement(m,{mode:"out-in"},i.createElement(u,{classNames:"".concat(I,"--swap"),addEndListener:function(e,t){e.addEventListener("transitionend",t,!1)},key:E},i.createElement("span",{className:p.apply(void 0,t(O("__number-container__text")))},i.createElement(C,{fulfilledStepIcon:j,fulfilledStepIconType:D,isFulfilledStepDisplayNumber:F,stepNumber:b,status:E}))))),H&&g&&i.createElement(y,{className:P})),i.createElement("div",{className:p.apply(void 0,t(O("__text-container")))},i.createElement("div",{className:p.apply(void 0,t(O("__text-container__title")))},i.createElement(v,{text:E})," ",i.createElement("span",{className:p.apply(void 0,t(O("__text-container__title__text")))},x)),i.createElement("span",{className:p.apply(void 0,t(O("__text-container__subtitle__text")))},k)))};k.defaultProps={stepComponentClassName:"",stepNumber:1,status:E.PENDING,titleText:"Heading",subtitleText:"Heading",type:x.PRIMARY,fulfilledStepIcon:_,fulfilledStepIconType:f.type.SVG,isFulfilledStepDisplayNumber:!1,onClick:b,isVertical:!1};var T=k;export{T as default};
