"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[40565],{40565:(t,e,i)=>{i.r(e),i.d(e,{default:()=>Z});var a=i(29747),n=i(14232),o=i(64306),r=i(89328),l=i(39069),d=i(18079),s=i(63276),I=i(44364),u=i(32586),h=i(63381),S=i(32265),c=i(36384);let _={THUMB_INNER_PADDINGS:{S:h.E.SIZE_05,M:h.E.SIZE_10,L:h.E.SIZE_15},THUMB_MARGIN:h.E.SIZE_50,THUMB_SIZES_HEIGHT:{S:40,M:60,L:80},THUMB_SIZES_WIDTH:{S:60,M:80,L:100},VIDEO_MAX_WIDTH:"75vw",VIDEO_RATIO:(0,S.rb)("9/16")/100},m={S:225,M:460,L:582},T={brandVideoDescription:[c.Il.bodyCopy,{color:I.l.LIGHT.GRAY_70,fontWeight:450,textAlign:"left",marginBottom:h.E.SIZE_40}],brandVideoTitle:[c.Il.secondaryHeadline,{textAlign:"left",marginTop:h.E.SIZE_40,marginBottom:h.E.SIZE_20}],carouselItem:{flex:"0 0 100%",height:"100%",width:"100%"},container:{".brand-video-carousel-container":{paddingBottom:h.E.SIZE_20}},navigationButton:{borderBottomLeftRadius:u.Z.RADIUS_25,borderTopLeftRadius:u.Z.RADIUS_25,height:50,width:50},thumb:{"&:not(:last-of-type)":{marginRight:h.E.SIZE_20},alignItems:"center",borderBottom:d.s.SOLID_TRANSPARENT_2PX,display:"flex",height:_.THUMB_SIZES_HEIGHT.S,img:{borderRadius:u.Z.RADIUS_5},width:_.THUMB_SIZES_WIDTH.S,[s.MQ.M]:{height:_.THUMB_SIZES_HEIGHT.M,width:_.THUMB_SIZES_WIDTH.M},[s.MQ.L]:{height:_.THUMB_SIZES_HEIGHT.L,width:_.THUMB_SIZES_WIDTH.L}},thumbActive:{borderColor:I.l.GLOBAL.ORANGE},thumbsContainer:{display:"flex",justifyContent:"flex-start"},thumbsImage:{objectFit:"contain"},thumbsImageContainer:{height:_.THUMB_SIZES_HEIGHT.S,width:_.THUMB_SIZES_WIDTH.S,[s.MQ.M]:{height:_.THUMB_SIZES_HEIGHT.M,width:_.THUMB_SIZES_WIDTH.M},[s.MQ.L]:{height:_.THUMB_SIZES_HEIGHT.L,width:_.THUMB_SIZES_WIDTH.L}},videoContainerStyles:{boxSizing:"border-box","button div":{height:"inherit",padding:0,width:"inherit"},height:m.S,maxHeight:"100vh",paddingBottom:0,width:"100%",[s.MQ.M]:{height:m.M},[s.MQ.L]:{height:m.L,maxHeight:"calc(100vh - ".concat(_.THUMB_MARGIN+_.THUMB_SIZES_WIDTH.L+_.THUMB_INNER_PADDINGS.L+1,"px)")}}},H=function(t){let{videoItem:e,isActive:i,shouldPauseVideo:n,setShouldPauseVideo:o}=t,d={altText:e.title,src:e.thumbnailImageUrl,type:l.z.IMAGE};return(0,a.Y)("div",{css:T.carouselItem,"data-component":"TireVideoCarouselItem",children:(0,a.Y)(r.A,{customContainerStyles:T.videoContainerStyles,isButtonFocusable:i,poster:d,sizes:[300,700,870],shouldPauseVideo:n,videoId:e.videoUrl,setShouldPauseVideo:o,"data-element":"Video"})})};var E=i(30735),M=i(89674),g=i(57532);let b=[M.dw[M.ju.FIXED_HEIGHT]],B=function(t){let{assetList:e,currentIndex:i,handleThumbImageClick:n}=t,o=t=>()=>{n(t)};return(0,a.Y)("div",{css:T.thumbsContainer,"data-component":"TireVideoThumbs",children:e.map((t,e)=>{let n=(0,g.ui)("pdp.tireImage.thumbAltText",{number:e+1}),r=t.thumbnailImageUrl,l=t.title;return(0,a.Y)("button",{css:[T.thumb,e===i&&T.thumbActive],className:e===i?"thumbActive":"",onClick:o(e),children:(0,a.Y)(E.default,{customContainerStyles:T.thumbsImageContainer,customImageStyles:T.thumbsImage,widths:[_.THUMB_SIZES_WIDTH.S,_.THUMB_SIZES_WIDTH.M,_.THUMB_SIZES_WIDTH.L],altText:l||n,src:r||"",transformationHandlers:b})},"tire-image-thumb-".concat(e))})})},Z=function(t){let{assetList:e,customCarouselStyle:i}=t,r=(0,n.useRef)(void 0),[l,d]=(0,n.useState)(0),[s,I]=(0,n.useState)(!1),u=(0,n.useCallback)(()=>{r.current&&(I(!0),d(r.current.selectedScrollSnap()))},[]),h=(0,n.useCallback)(t=>{r.current=t,r.current.on("select",u)},[u]),S=(0,n.useCallback)(t=>{r.current&&r.current.scrollTo(t)},[]);return(0,a.FD)("div",{css:[T.container,i||{}],"data-component":"TireVideoGallery",children:[(0,a.Y)(o.A,{contentClassName:"brand-video-carousel-container",customNavigationButtonStyles:T.navigationButton,getCarouselObject:h,withNavigation:!0,"data-element":"Carousel",children:e.map((t,e)=>(0,a.Y)(H,{index:e,videoItem:t,isActive:e===l,shouldPauseVideo:s,setShouldPauseVideo:I},"tire-image-".concat(e)))}),(0,a.Y)("div",{children:(0,a.Y)(B,{assetList:e,currentIndex:l,handleThumbImageClick:S,"data-element":"TireVideoThumbs"})})]})}}}]);