'use client';
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{composeTypographyStyle as l,getGlobalColorStateStyle as r,filterHoverVariables as n,cls as a,getGlobalColorResponsiveStyle as p}from"@gem-sdk/core";import i from"next/link";import{useState as o,useRef as s}from"react";import{Transition as g}from"react-transition-group";import c from"../../icons/ChevronLeft.js";import m from"../../icons/Dismiss.js";let duration=300,defaultStyle={transitionDuration:"300ms",opacity:0},transitionStyles={entering:{opacity:1,transform:"translateX(0)"},entered:{opacity:1,transform:"translateX(0)"},exiting:{opacity:0,transform:"translateX(50px)"},exited:{opacity:0,transform:"translateX(50px)"},unmounted:{opacity:0}},MenuMobileItem=({id:u,menu:f,arrow:d,menuBg:h,menuTextColor:y,closeMenu:x,depth:b=0,maxDepth:v=2,typo:w,typography:N,enableHoverEffect:k})=>{let[j,C]=o(!1),D=s(null),M=l(w,N),I=f?.[u];if(!I||b>v)return null;let S=b===v,X=!!I?.childrens?.length&&!S,z=X&&!!d,P=e=>{e.preventDefault(),e.stopPropagation(),C(e=>!e)},q=r("c",y),E=k?q:n(q);return e("li",{className:a("gp-group gp-flex gp-cursor-pointer gp-gap-2 gp-whitespace-nowrap gp-px-4 gp-py-2",{"gp-flex-col gp-border-b last:gp-border-b-transparent":b>0}),style:{...E,...p("bgc",h)},children:[e("div",{className:"gp-flex gp-w-full gp-items-center gp-justify-between","aria-hidden":!0,onClick:!I?.link&&z?P:void 0,children:[I?.link?t(i,{href:I.link,title:I.title,className:"gp-w-full",children:I.title}):t("span",{style:{...M},children:I?.title}),z&&t("span",{role:"button",tabIndex:0,"aria-expanded":j,onKeyDown:e=>{("Enter"===e.key||" "===e.key)&&P(e)},onClick:P,dangerouslySetInnerHTML:{__html:d},className:a("gp-ml-auto gp-transition-all gp-duration-200 [&>svg]:gp-w-5",{"gp-rotate-0":b>0&&!j,"gp-rotate-180":b>0&&j,"-gp-rotate-90":0===b}),style:{...M}})]}),X&&t(g,{in:j,timeout:300,nodeRef:D,unmountOnExit:!0,children:l=>e("div",{ref:D,className:a("gp-z-10 gp-flex gp-cursor-default gp-flex-col gp-transition-all",{"gp-absolute gp-left-0 gp-top-0 gp-h-full gp-w-full":0===b}),style:{...p("bgc",h),...defaultStyle,...transitionStyles[l]},children:[0===b&&e("div",{className:"gp-relative gp-flex gp-h-10 gp-w-full gp-items-center gp-justify-between gp-border-b",children:[t("button",{onClick:e=>{e.preventDefault(),e.stopPropagation(),C(!1)},className:"gp-relative gp-z-1 gp-flex gp-aspect-square gp-h-full gp-items-center gp-justify-center",children:t(c,{className:"gp-w-5"})}),t("div",{"aria-hidden":!0,onClick:e=>{e.preventDefault(),e.stopPropagation(),C(!1)},className:"gp-absolute gp-inset-0 gp-flex gp-items-center gp-justify-center",children:t("span",{className:"gp-font-semibold",children:I.title})}),t("button",{onClick:x,"aria-label":"Close menu",className:"gp-relative gp-z-1 gp-flex gp-aspect-square gp-h-full gp-items-center gp-justify-center",style:{...r("c",y)},children:t(m,{className:"gp-w-5"})})]}),t("ul",{className:a("gp-flex gp-flex-col"),children:I?.childrens?.map(e=>t(MenuMobileItem,{id:e,menu:f,depth:b+1,maxDepth:v,arrow:d,menuBg:h,menuTextColor:y},e))})]})})]})};export{MenuMobileItem as default};
