"use strict";(self.__LOADABLE_LOADED_CHUNKS__=self.__LOADABLE_LOADED_CHUNKS__||[]).push([[69876],{94835:(n,e,t)=>{t.r(e),t.d(e,{default:()=>Cn});var i=t(29439),o=t(67294),r=t(63742);t(21249);function c(n){return n.current}var a,s,u,l,d,h,f,g,p,m,v,x,Z,b,w,y,j,S,P,k,_,C,I,L,T,E,z,M,R,F,B=function(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,t=function(n){var e=(0,o.useRef)(n),t=(0,o.useState)(n),r=(0,i.Z)(t,2),c=r[0],a=r[1];return[c,function(n){a(n),e.current=n},e]}(0),r=(0,i.Z)(t,3),a=r[0],s=r[1],u=r[2],l=(0,o.useState)(!1),d=(0,i.Z)(l,2),h=d[0],f=d[1],g=(0,o.useState)(e),p=(0,i.Z)(g,2),m=p[0],v=p[1],x=(0,o.useRef)(0),Z=(0,o.useRef)(0),b=(0,o.useRef)(0),w=(0,o.useRef)(0),y=function(n){return"changedTouches"in n?n.changedTouches[0]:n},j=function(n){var e=y(n).clientX,t=c(w)-e,i=c(b)-t,o=c(Z);i>0&&(i=0),i<o&&(i=o),s(i)},S=function e(){var t,i,o=c(b),r=c(x),a=c(u),l=o-a;a=Math.abs(l)>40?l>0?Math.floor(a/r)*r:Math.ceil(a/r)*r:Math.round(a/r)*r,f(!1),s(a),v(Math.abs(a/r)),null===(t=n.current)||void 0===t||t.removeEventListener("touchend",e),null===(i=n.current)||void 0===i||i.removeEventListener("touchmove",j)};return{onTouchStart:function(e){var t,i;f(!0),b.current=c(u),w.current=y(e).clientX;var o=c(n),r=o.offsetWidth;x.current=r,Z.current=r-o.scrollWidth,null===(t=n.current)||void 0===t||t.addEventListener("touchmove",j),null===(i=n.current)||void 0===i||i.addEventListener("touchend",S)},indicatorOnClick:function(e){var t=c(n).offsetWidth;v(e),s(-t*e)},offsetX:a,isSwiping:h,currentIdx:m}},D=t(30168),O=t(71893),W=t(30305),X=t(46229),N=t(70370),A=O.ZP.div(a||(a=(0,D.Z)(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  margin-bottom: ",";\n  flex-direction: column;\n\n  "," {\n    margin-bottom: 0;\n  }\n\n  ",";\n"])),(function(n){return n.theme.spacing.spacing04}),W.B.desktop,(function(n){var e=n.openInFullScreen,t=n.theme;return e&&(0,O.iv)(s||(s=(0,D.Z)(["\n      margin-bottom: ",";\n      height: 100%;\n    "])),t.spacing.spacing01)})),G=(0,O.ZP)(X.z)(u||(u=(0,D.Z)(["\n  z-index: 1;\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ",";\n  height: ",";\n"])),(function(n){return n.theme.spacing.spacing06}),(function(n){return n.theme.spacing.spacing06})),U=O.ZP.img(l||(l=(0,D.Z)(["\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n"]))),J=O.ZP.div(d||(d=(0,D.Z)(["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10000;\n  background-color: ",";\n  padding: ",";\n  display: flex;\n  flex-direction: column;\n"])),(function(n){return n.theme.colors.white}),(function(n){return n.theme.spacing.spacing02})),Y=(0,O.ZP)(N.h)(h||(h=(0,D.Z)(["\n  align-self: flex-end;\n"]))),H=(0,O.ZP)(X.z)(f||(f=(0,D.Z)(["\n  margin-top: ",";\n  width: 100%;\n  justify-content: center;\n  & svg {\n    margin-right: ",";\n  }\n  "," {\n    width: fit-content;\n    justify-content: flex-start;\n  }\n"])),(function(n){return n.theme.spacing.spacing02}),(function(n){return n.theme.spacing.spacing01}),W.B.tabletLandscape),K=(t(92222),O.ZP.div(g||(g=(0,D.Z)(["\n  width: 100%;\n  overflow: hidden;\n  touch-action: pan-y;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n  .show-only-mobile {\n    "," {\n      display: none;\n    }\n  }\n  .hide-in-mobile {\n    display: none;\n    "," {\n      display: flex;\n    }\n  }\n  ","\n"])),W.B.tabletLandscape,W.B.tabletLandscape,(function(n){return n.openInFullScreen&&(0,O.iv)(p||(p=(0,D.Z)(["\n      height: 100%;\n    "])))}))),$=O.ZP.a(m||(m=(0,D.Z)(["\n  text-decoration: none;\n  &:focus {\n    box-shadow: none;\n  }\n  cursor: inherit;\n"]))),q=O.ZP.ul(v||(v=(0,D.Z)(["\n  display: flex;\n  flex-direction: row;\n  list-style: none;\n  ",";\n  ",";\n  margin-bottom: ",";\n  aspect-ratio: 1 / 1;\n\n  "," {\n    transition: none;\n  }\n\n  ","\n  cursor: ",";\n"])),(function(n){var e=n.offsetX;return"transform: translate3d(".concat(e,"px, 0, 0)")}),(function(n){return!n.isSwiping&&"transition: transform 0.3s ease-out"}),(function(n){return n.theme.spacing.spacing01}),W.B.desktop,(function(n){return n.imgZoomed&&"pointer-events: none;"}),(function(n){return n.imgZoomed?"zoom-out":"zoom-in"})),Q=O.ZP.div(x||(x=(0,D.Z)(["\n  display: -webkit-box;\n  overflow: hidden;\n  list-style: none;\n  margin: ",";\n"])),(function(n){var e=n.theme;return"0 ".concat(e.spacing.spacing01)})),V=O.ZP.img(Z||(Z=(0,D.Z)(["\n  user-select: none;\n  object-fit: cover;\n  width: 100%;\n  height: auto;\n"]))),nn=O.ZP.li(b||(b=(0,D.Z)(["\n  width: 100%;\n  flex-shrink: 0;\n  object-fit: cover;\n  margin-bottom: 0;\n"]))),en=O.ZP.li(w||(w=(0,D.Z)(["\n  width: ",";\n  height: ",";\n  margin: ",";\n  border-radius: 50%;\n  background: ",";\n  border: ",";\n"])),(function(n){return n.theme.spacing.spacing01}),(function(n){return n.theme.spacing.spacing01}),(function(n){var e=n.theme;return"0 ".concat(e.spacing.spacing005)}),(function(n){var e=n.isSelected,t=n.theme;return e?t.colors.black:t.colors.white}),(function(n){var e=n.theme;return"".concat(e.spacing.spacing0025," solid ").concat(e.colors.black)})),tn=O.ZP.li(y||(y=(0,D.Z)(["\n  width: 64px;\n  height: 64px;\n  padding: ",";\n  border-radius: ",";\n  border: ",";\n  margin-right: ",";\n  margin-bottom: 0;\n"])),(function(n){return n.theme.spacing.spacing01}),(function(n){return n.theme.spacing.spacing01}),(function(n){var e=n.isSelected,t=n.theme;return e?"".concat(t.spacing.spacing0025," solid ").concat(t.colors.black):"".concat(t.spacing.spacing0025," solid ").concat(t.colors.environment.percent20)}),(function(n){return n.theme.spacing.spacing02})),on=O.ZP.div(j||(j=(0,D.Z)(["\n  display: flex;\n  justify-content: center;\n"]))),rn=O.ZP.button(S||(S=(0,D.Z)(["\n  background: ",";\n  padding: ",";\n  height: 64px;\n  width: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n\n  &:hover {\n    background: ",";\n  }\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n"])),(function(n){return n.theme.colors.white}),(function(n){var e=n.theme;return"".concat(e.spacing.spacing01," ").concat(e.spacing.spacing005)}),(function(n){return n.theme.colors.environment.percent05})),cn=O.ZP.div(P||(P=(0,D.Z)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"]))),an=(0,O.ZP)(r.J)(k||(k=(0,D.Z)(["\n  width: ",";\n  height: ",";\n"])),(function(n){return n.theme.spacing.spacing02}),(function(n){return n.theme.spacing.spacing02})),sn=O.ZP.ul(_||(_=(0,D.Z)(["\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  top: 0;\n  right: 0;\n  list-style-type: none;\n  pointer-events: none;\n"]))),un=O.ZP.li(C||(C=(0,D.Z)(["\n  width: ",";\n  height: ",";\n  margin-bottom: ",";\n  z-index: 2;\n  text-decoration: none;\n  &:focus {\n    box-shadow: none;\n  }\n"])),(function(n){return n.theme.spacing.spacing06}),(function(n){return n.theme.spacing.spacing06}),(function(n){return n.theme.spacing.spacing01})),ln=O.ZP.div(I||(I=(0,D.Z)(["\n  max-width: 73vh;\n  overflow: hidden;\n  aspect-ratio: 1 / 1;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n"]))),dn=O.ZP.div(L||(L=(0,D.Z)(["\n  position: relative;\n  display: flex;\n  width: 100%;\n  justify-content: center;\n  flex: 1;\n"]))),hn=O.ZP.div(T||(T=(0,D.Z)(["\n  max-width: 70vh;\n  width: 100%;\n"]))),fn=O.ZP.div(E||(E=(0,D.Z)(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  justify-content: center;\n"]))),gn=t(43647);t(32564);function pn(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:300,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=(0,o.useRef)(null);return(0,o.useCallback)((function(o,r){i.current?(clearTimeout(i.current),i.current=null,n&&n(o,r)):i.current=setTimeout((function(){t.onSingleTap&&t.onSingleTap(o),i.current=null}),e)}),[n,e,t.onSingleTap])}var mn=O.ZP.div(z||(z=(0,D.Z)(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  ",";\n"])),(function(n){var e=n.maxWidth;return e&&"max-width: ".concat(e,";")})),vn=O.ZP.canvas(M||(M=(0,D.Z)(["\n  position: absolute;\n"]))),xn=O.ZP.div(R||(R=(0,D.Z)(["\n  cursor: zoom-out;\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background-image: url(",");\n  background-size: 200%;\n  background-repeat: no-repeat;\n"])),(function(n){return n.src})),Zn=O.ZP.img(F||(F=(0,D.Z)(["\n  opacity: 0;\n"]))),bn=t(85893);const wn=function(n){var e=n.src,t=n.alt,r=n.close,c=(0,o.useState)({x:0,y:0}),a=(0,i.Z)(c,2),s=a[0],u=a[1],l=(0,o.useState)(!1),d=(0,i.Z)(l,2),h=d[0],f=d[1],g=(0,o.useRef)({x:0,y:0}),p=(0,o.useRef)(null),m=(0,o.useRef)(null),v=pn((function(n,e){e&&e()})),x=function(){f(!1)};return(0,bn.jsxs)(mn,{maxWidth:"1000px",children:[(0,bn.jsx)(vn,{ref:p}),(0,bn.jsx)(xn,{style:{backgroundPosition:"".concat(s.x,"% ").concat(s.y,"%")},src:e,onClick:function(){"ontouchstart"in document.documentElement||r()},onMouseMove:function(n){var e=n.currentTarget.getBoundingClientRect(),t=(n.clientX-e.x)/e.width*100,i=(n.clientY-e.y)/e.height*100;u({x:t,y:i})},onMouseUp:x,onTouchStart:function(n){!function(n){var e=n.touches[0];g.current={x:e.clientX,y:e.clientY},f(!0)}(n),v(n,r)},onTouchMove:function(n){if(h&&g.current){var e=n.touches[0].clientX,t=n.touches[0].clientY,i=e-g.current.x,o=t-g.current.y,r=s.x-i,c=s.y-o;u({x:r<0?0:r>100?100:r,y:c<0?0:c>100?100:c}),g.current={x:e,y:t}}},onTouchEnd:x,children:(0,bn.jsx)(Zn,{src:e,alt:t,ref:m,onLoad:function(){if(m.current&&p.current){var n=p.current.getContext("2d");p.current.width=m.current.width,p.current.height=m.current.height,null===n||void 0===n||n.drawImage(m.current,0,0,m.current.width,m.current.height)}},crossOrigin:"anonymous"})})]})};const yn=function(n){var e=n.items,t=n.badges,i=n.containerId,r=n.toggleFullScreen,c=n.openInFullScreen,a=n.imgZoomed,s=n.setImgZoomed,u=(0,o.useRef)(null),l=(0,o.useRef)(null),d=(0,gn.oN)({sliderRef:l,scrollSize:350}),h=d.buttonStatus,f=d.handleSlide,g=B(u),p=g.onTouchStart,m=g.indicatorOnClick,v=g.isSwiping,x=g.offsetX,Z=g.currentIdx,b=pn((function(n,e){e&&e()}));return(0,bn.jsxs)(K,{onTouchStart:p,id:i,openInFullScreen:c,children:[(0,bn.jsxs)(dn,{children:[a&&(0,bn.jsx)(fn,{children:(0,bn.jsx)(wn,{src:a.large,alt:a.alt,close:function(){return s(void 0)}})}),(0,bn.jsx)(ln,{children:(0,bn.jsx)(q,{ref:u,isSwiping:v,"data-testid":"swiper__main-image",offsetX:x,imgZoomed:!!a,children:e.map((function(n,e){return(0,bn.jsxs)(nn,{"data-wa-hit-type":"event","data-wa-event-category":"product detail page","data-wa-event-action":"product-image-selected","data-wa-event-label":"product-image-selected","data-wa-event-value":"","data-wa-event-non-interaction":"false",onClick:function(e){return function(n,e){r&&r(),"ontouchstart"in document.documentElement||c&&s((function(n){return n===e?void 0:e}))}(0,n)},onTouchStart:function(e){return b(e,(function(){return c&&s(n)}))},children:[(0,bn.jsx)($,{href:n.cdn,onClick:function(n){return n.preventDefault()},children:(0,bn.jsx)(V,{src:n.large,alt:n.alt,draggable:!1,loading:0!==e?"lazy":void 0})}),t&&0===e&&(0,bn.jsx)(sn,{children:t.map((function(n,e){return(0,bn.jsx)(un,{"data-testid":"badge-image",children:(0,bn.jsx)(U,{alt:n.alt,src:n.path,loading:"lazy"})},e)}))})]},"main-image-".concat(e))}))})})]}),(0,bn.jsxs)(hn,{children:[(0,bn.jsxs)(cn,{"data-testid":"carousel",className:"hide-in-mobile",children:[h.prev&&(0,bn.jsx)(rn,{onClick:function(){return f(gn.G6.prev)},children:(0,bn.jsx)(an,{icon:"chevron_left"})}),(0,bn.jsx)(Q,{ref:l,children:e.map((function(n,e){return(0,bn.jsx)(tn,{isSelected:Z===e,onMouseEnter:function(){return n=e,c&&s(void 0),void m(n);var n},"data-testid":"thumbnail",children:(0,bn.jsx)(U,{alt:n.alt,src:n.thumb,loading:"lazy",draggable:!1})},"thumbnail-image-".concat(e))}))}),h.next&&(0,bn.jsx)(rn,{onClick:function(){return f(gn.G6.next)},children:(0,bn.jsx)(an,{icon:"chevron_right"})})]}),(0,bn.jsx)(on,{className:"show-only-mobile",children:e.map((function(n,e){return(0,bn.jsx)(en,{isSelected:Z===e,"data-testid":"bullet"},"bullet-".concat(e))}))})]})]})};var jn=t(64815),Sn=t(73935);const Pn=function(n){var e=n.children,t=n.className,r=(0,o.useState)((function(){var n=document.createElement("div");return t&&n.classList.add(t),n})),c=(0,i.Z)(r,1)[0];return(0,o.useEffect)((function(){return document.body.appendChild(c),function(){document.body.removeChild(c)}}),[c]),(0,Sn.createPortal)(e,c)};var kn=t(28225),_n=t(31001);const Cn=function(n){var e=n.eventWishListName,t=n.onWishList,c=n.images,a=n.badges,s=n.addToWishListId,u=n.swiperContainerId,l=n.eventShowMoreImages,d=(0,jn.v)(),h=(0,o.useState)(!1),f=(0,i.Z)(h,2),g=f[0],p=f[1],m=(0,o.useState)(),v=(0,i.Z)(m,2),x=v[0],Z=v[1],b=(0,kn.$G)(),w=(0,i.Z)(b,1)[0],y=(0,o.useCallback)((function(){return d.publish({name:e})}),[d,e]),j=function(){document.body.style.overflow=""},S=(0,o.useCallback)((function(){return l?d.publish({name:l,payload:{id:_n.BW.SECTION_UGC_MEDIA}}):void 0}),[d,l]),P=(0,bn.jsx)(yn,{items:c,badges:a,containerId:u,toggleFullScreen:!g&&function(){document.body.style.overflow="hidden",p(!0)}||void 0,openInFullScreen:g,imgZoomed:x,setImgZoomed:Z});return(0,bn.jsxs)(bn.Fragment,{children:[(0,bn.jsxs)(A,{children:[(0,bn.jsx)(G,{secondary:!0,id:s,onClick:y,"data-testid":"whish-list__icon","data-wa-hit-type":"event","data-wa-event-category":"product detail page","data-wa-event-action":"add to wishlist","data-wa-event-label":"","data-wa-event-value":"","data-wa-event-non-interaction":"false",children:(0,bn.jsx)(r.J,{icon:t?"vote_heart_filled":"vote_heart"})}),P,!!l&&(0,bn.jsxs)(H,{secondary:!0,id:"pdp-ugc-more-images",onClick:S,children:[(0,bn.jsx)(r.J,{icon:"gallery",small:!0,right:!0}),w("productDetail.lightbox.showMoreImages")]})]}),g?(0,bn.jsx)(Pn,{children:(0,bn.jsxs)(J,{children:[(0,bn.jsx)(Y,{onClick:function(){p(!1),Z(void 0),j()},label:"Zoom Out",icon:"remove",large:!0}),(0,bn.jsx)(A,{openInFullScreen:g,children:P})]})}):(0,bn.jsx)(bn.Fragment,{})]})}}}]);
//# sourceMappingURL=Lightbox.js.map