'use client';
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react"),reactTransitionGroup=require("react-transition-group"),useBodyOverlay=require("../../../hooks/useBodyOverlay.js"),Dismiss=require("../../icons/Dismiss.js"),MenuIcon=require("../../icons/MenuIcon.js"),MenuMobileItem=require("./MenuMobileItem.js");const 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}},overlayTransitionStyles={entering:{opacity:1},entered:{opacity:1},exiting:{opacity:0},exited:{opacity:0},unmounted:{opacity:0}},MobileMenu=({menu:e,typography:t,typo:s,arrow:r,menuTextColor:l,menuBg:i,textColor:a,className:n,itemEnableHoverEffect:o})=>{let u=core.useEditorMode(),[c,p]=React.useState(!1),g=React.useRef(null),d=React.useRef(null),m=e?.ROOT;useBodyOverlay.useBodyOverlay(c);let y=e=>{"edit"!==u&&p(e)},x=core.composeTypographyClassName(s,t);return jsxRuntime.jsxs("div",{ref:d,className:core.cls("gp-relative gp-z-5 gp-h-full gp-items-center gp-justify-center",n),children:[jsxRuntime.jsx("button",{"aria-label":"Menu",onClick:()=>{y(!0)},style:{...core.getGlobalColorStateStyle("c",a)},children:jsxRuntime.jsx(MenuIcon.default,{className:"gp-w-8"})}),jsxRuntime.jsx(reactTransitionGroup.Transition,{in:c,timeout:300,nodeRef:g,unmountOnExit:!1,children:a=>jsxRuntime.jsxs("div",{className:"gp-fixed gp-inset-0 gp-z-[999] gp-overflow-hidden",style:{pointerEvents:c?"auto":"none",visibility:c?"visible":"hidden"},children:[jsxRuntime.jsx("div",{"aria-hidden":!0,"aria-label":"Overlay",onClick:()=>{y(!1)},className:"gp-fixed gp-inset-0 gp-z-[999] gp-bg-slate-600/40",style:{...defaultStyle,...overlayTransitionStyles[a]}}),jsxRuntime.jsxs("div",{className:"gp-relative gp-inset-0 gp-z-[9999] gp-h-full gp-w-full gp-max-w-[400px] gp-overflow-hidden",style:{...defaultStyle,...transitionStyles[a],...core.getGlobalColorResponsiveStyle("bgc",i)},children:[jsxRuntime.jsx("div",{className:"gp-flex gp-h-10 gp-items-center gp-border-b gp-pl-4",children:jsxRuntime.jsx("button",{onClick:()=>y(!1),className:"gp-ml-auto gp-flex gp-aspect-square gp-h-full gp-items-center gp-justify-center",style:{...core.getGlobalColorStateStyle("c",l)},children:jsxRuntime.jsx(Dismiss.default,{className:"gp-w-5"})})}),jsxRuntime.jsx("ul",{role:"menu",className:core.cls("gp-w-full scrollbar:!gp-h-1.5 scrollbar:!gp-w-1.5 scrollbar:gp-bg-transparent scrollbar-track:!gp-rounded scrollbar-track:!gp-bg-slate-100 scrollbar-thumb:!gp-rounded scrollbar-thumb:!gp-bg-slate-300",x),ref:g,style:{...core.getGlobalColorResponsiveStyle("bgc",i)},children:m?.childrens?.map(a=>jsxRuntime.jsx(MenuMobileItem.default,{id:a,menu:e,arrow:r,depth:0,maxDepth:2,menuBg:i,menuTextColor:l,closeMenu:()=>y(!1),typo:s,typography:t,enableHoverEffect:o},a))})]})]})})]})};exports.default=MobileMenu;
