https://cdn2.pickyourtrail.com/images/assets/veho-web-next/2610013…/static/chunks/3053-ca54d2a3391a566f.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3053],{23053:(e,l,t)=>{t.r(l),t.d(l,{default:()=>y});var a=t(95155),s=t(12115),n=t(93518),i=t(46967),r=t(11501),o=t(1247),c=t(68376),d=t(83153),u=t(33455),h=t(95517),p=t(5565),x=t(82802),m=t.n(x),f=t(84149),b=t(60766);let g=e=>{let{media:l,variant:t="main",isMobile:s=!1,onImageLoad:n,isActive:i=!1}=e,r="video"===l.type||(0,b.V)(l.url);return"thumbnail"===t?(0,a.jsx)(c.az,{className:(0,u.cn)("relative w-[95px] h-[64px]",!s&&"overflow-hidden cursor-pointer"),children:r?(0,a.jsx)(m(),{url:l.url,loop:!0,width:"100%",height:"100%",className:"video-player-thumb",muted:!0,playsinline:!1,playing:!1}):(0,a.jsx)(c.az,{className:"relative w-[95px] h-[64px] overflow-hidden rounded-lg",children:(0,a.jsx)(p.default,{src:(0,f.A)(l.url,"w=95&h=64&fit=crop"),alt:"Gallery Thumbnail",fill:!0,className:"object-cover rounded-lg"})})}):(0,a.jsx)(c.az,{className:(0,u.cn)("relative w-full h-full mx-auto","overflow-hidden","flex items-center justify-center",s?"h-[500px] mt-[38px]":"h-[600px] mt-0",!s&&"rounded-xl"),children:r?(0,a.jsx)(m(),{onClick:e=>e.stopPropagation(),url:l.url,loop:!0,width:"100%",height:"100%",playsinline:!0,playing:!0,muted:!i,style:{objectFit:"contain"}}):(0,a.jsx)(c.az,{className:(0,u.cn)("relative w-full","flex items-center justify-center",s?"h-[500px]":"h-[600px]"),children:(0,a.jsx)(p.default,{onClick:e=>e.stopPropagation(),alt:"Gallery Image",src:(0,f.A)(l.url,s?"h=500":"h=600"),style:{width:"auto",height:"auto",objectFit:"cover",objectPosition:"center",borderRadius:s?"0px":"12px",maxWidth:"100%",maxHeight:"100%"},sizes:"100vw",onLoad:n,loading:"lazy",width:0,height:0})})})},w={breakpoints:{360:{slidesPerView:1,spaceBetween:0,freeMode:!0},1024:{slidesPerView:1,spaceBetween:0,freeMode:!0}}},v={breakpoints:{360:{spaceBetween:8,slidesPerView:3,freeMode:!0},1024:{slidesPerView:7,slidesPerGroup:1,spaceBetween:16,freeMode:!0}}},j=(0,s.forwardRef)((e,l)=>{let{singleSlide:t=!1,showCloseIcon:p=!0,categorizedImages:x,images:m=[]}=e,[f,b]=(0,s.useState)(!1),[j,y]=(0,s.useState)(0),[N,C]=(0,s.useState)(!0),[k,z]=(0,s.useState)(""),[E,P]=(0,s.useState)(null),[S,M]=(0,s.useState)(null),[I,V]=(0,s.useState)(0),A=(0,s.useRef)(null),B=(0,h.useDeviceInfo)(),D=null==B?void 0:B.isMobile,O=s.useMemo(()=>x?Object.keys(x):[],[x]);(0,s.useEffect)(()=>{O.length>0&&!k&&z(O[0])},[O,k]),(0,s.useEffect)(()=>{f&&C(!0)},[f]);let F=s.useMemo(()=>m&&0!==m.length?x&&k?x[k]||[]:m.map(e=>"string"==typeof e?{type:"image",url:e}:e):[],[x,k,m]),T=(0,s.useCallback)(()=>{if(x&&O.length>1){let e=(O.indexOf(k)+1)%O.length;z(O[e]),E&&E.slideTo(0)}},[x,O,k,E]),G=(0,s.useCallback)(e=>{V(e.activeIndex),void 0!==e.activeIndex&&y(e.activeIndex),x&&O.length>1&&e.isEnd&&!e.isBeginning&&setTimeout(()=>{T()},300)},[x,O.length,T,y]),R=(0,s.useCallback)(()=>{if(x&&O.length>1){let e=(O.indexOf(k)+1)%O.length;z(O[e]),E&&E.slideTo(0)}},[x,O,k,E]),_=(0,s.useCallback)(()=>{if(x&&O.length>1){let e=O.indexOf(k),l=0===e?O.length-1:e-1;z(O[l]),E&&E.slideTo(0)}},[x,O,k,E]),H=e=>{j>0&&(e.slideTo(j),V(j))},L=(0,s.useCallback)(()=>{C(!1)},[]),W=(0,s.useCallback)(()=>{b(!1)},[]),q=(0,s.useCallback)(e=>{let l=e.target;l.closest(".gallery-main-content")||l.closest(".swiper-nav-elements")||l.closest(".thumb-swiper")||l.closest("[data-tab]")||p||W()},[p,W]);if((0,s.useImperativeHandle)(l,()=>({openGallery:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;y(e),b(!0)},closeGallery:W})),!f)return(0,a.jsx)(a.Fragment,{});let U=(0,a.jsx)(c.az,{className:"relative w-full h-full flex flex-col",children:t&&F.length>0?(0,a.jsx)(c.VP,{className:"justify-center h-full",children:(0,a.jsx)(g,{media:F[0],isMobile:D,onImageLoad:L,isActive:!0})}):(0,a.jsxs)(c.HD,{className:"relative h-full flex flex-col",children:[(0,a.jsxs)(c.az,{className:"relative flex-grow",children:[(0,a.jsx)(o.RC,{onSwiper:e=>{P(e),H(e)},onSlideChange:G,pagination:{type:"fraction",el:".swiper-pagination"},navigation:{prevEl:".swiper-nav-prev",nextEl:".swiper-nav-next"},thumbs:{swiper:S&&!S.destroyed?S:null},modules:[r.Vx,r.WO,r.dK],className:"h-full",...w,loop:!1,children:null==F?void 0:F.map((e,l)=>(0,a.jsx)(o.qr,{children:(0,a.jsxs)(c.az,{className:"gallery-main-content relative h-full flex items-center justify-center",children:[e&&(0,a.jsx)(g,{media:e,isMobile:D,onImageLoad:L,isActive:l===I}),x&&(null==e?void 0:e.type)&&(0,a.jsx)(c.az,{className:"absolute left-1/2 bottom-4 transform -translate-x-1/2 bg-black/70 px-3 py-1 rounded text-white text-xs",children:e.type.charAt(0).toUpperCase()+e.type.slice(1).replace(/-/g," ")})]})},"slide-".concat((null==e?void 0:e.url)||"item-".concat(l))))}),N&&(0,a.jsx)(c.az,{className:"absolute inset-0 flex items-center justify-center",children:(0,a.jsx)(c.az,{className:"w-8 h-8 border-4 border-white/30 border-t-white rounded-full animate-spin"})}),(0,a.jsx)(c.az,{className:"absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black/50 px-3 py-1 rounded-full",children:(0,a.jsxs)(d.Typography,{className:"text-white text-sm font-medium",children:[(null==E?void 0:E.activeIndex)!==void 0?E.activeIndex+1:j+1," ","/ ",(null==F?void 0:F.length)||0]})})]}),(null==F?void 0:F.length)>1&&!D&&(0,a.jsxs)(c.az,{className:"absolute top-1/2 left-0 right-0 -translate-y-1/2 flex justify-between items-center z-10 pointer-events-none",children:[(0,a.jsx)("button",{className:(0,u.cn)("swiper-nav-elements swiper-nav-prev","bg-[#FCF3E9] hover:bg-[#

1E5D5C2] w-[34px] h-[34px] rounded-full","flex items-center justify-center pointer-events-auto","border border-[#E5D5C2]",(null==E?void 0:E.isBeginning)&&"opacity-30 cursor-not-allowed"),onClick:e=>{e.stopPropagation(),E&&E.isBeginning&&_()},children:(0,a.jsx)(n.A,{className:"w-5 h-5"})}),(0,a.jsx)("button",{className:(0,u.cn)("swiper-nav-elements swiper-nav-next","bg-[#FCF3E9] hover:bg-[#E5D5C2] w-[34px] h-[34px] rounded-full","flex items-center justify-center pointer-events-auto","border border-[#E5D5C2]",(null==E?void 0:E.isEnd)&&"opacity-30 cursor-not-allowed"),onClick:e=>{e.stopPropagation(),E&&E.isEnd&&R()},children:(0,a.jsx)(i.A,{className:"w-5 h-5"})})]}),x&&O.length>0&&(0,a.jsx)(c.az,{className:"px-4 overflow-x-auto scrollbar-hide mb-4",children:(0,a.jsx)(c.az,{className:"flex gap-6",children:O.map(e=>{let l=e.charAt(0).toUpperCase()+e.slice(1);return(0,a.jsx)("button",{"data-tab":e,onClick:l=>{l.stopPropagation(),z(e)},className:(0,u.cn)("py-2 text-sm font-medium whitespace-nowrap",k===e?"text-green-500 border-b-2 border-green-500":"text-white"),children:l},e)})})}),(0,a.jsx)(c.az,{className:"w-full px-4 pb-6 mt-auto flex justify-center",ref:A,children:(0,a.jsx)(o.RC,{onSwiper:M,slidesPerView:"auto",spaceBetween:8,className:"thumb-swiper",...v,modules:[r.Vx,r.WO],watchSlidesProgress:!0,children:null==F?void 0:F.map((e,l)=>(0,a.jsx)(o.qr,{className:"!w-auto",children:(0,a.jsx)(c.az,{className:(0,u.cn)("border-2",l===j?"border-white":"border-transparent opacity-70"),children:e&&(0,a.jsx)(g,{media:e,variant:"thumbnail",isMobile:D})})}

1,"thumb-".concat((null==e?void 0:e.url)||"thumb_item-".concat(l))))})})]})});return D?(0,a.jsx)(d.Sheet,{open:f,onOpenChange:W,children:(0,a.jsx)(d.SheetContent,{className:"h-full max-h-screen bg-black rounded-none border-none",closeClassName:"text-white hover:text-black z-[1]",onClick:q,children:U})}):(0,a.jsx)(d.Dialog,{open:f,onOpenChange:W,children:(0,a.jsx)(d.DialogContent,{className:"p-0 w-full md:max-w-[100%] h-[100vh] max-h-[100vh] rounded-none overflow-hidden bg-black",closeClassName:"text-white hover:text-neutral-800",onClick:q,children:U})})});j.displayName="MediaGallery";let y=j}}]);