{"version":3,"sources":["webpack:///./Scripts/Components/ProductImageSlideshow.js"],"names":["ProductImageSlideshow","props","images","React","useState","activeImageIndex","setActiveImageIndex","isLightboxOpen","setIsLightboxOpen","currentLightboxImage","setCurrentLightboxImage","isMobile","useIsMobile","useKeenSlider","loop","slideChanged","s","details","relativeSlide","sliderRef","slider","openCurrentImage","className","onClick","ref","image","i","key","src","prev","next","thumbnail","moveToSlideRelative","join","Array","size","img","original","onClickPrev","onClickNext","currentImage","backdropClosesModal","isOpen","onClose"],"mappings":"2OA4EeA,UAtEe,SAAAC,GAAS,QAC3BC,EAAWD,EAAXC,OAD2B,EAEaC,IAAMC,SAAS,MAF5B,WAE5BC,EAF4B,KAEVC,EAFU,OAGSH,IAAMC,UAAS,GAHxB,WAG5BG,EAH4B,KAGZC,EAHY,OAIqBL,IAAMC,SAAS,MAJpC,WAI5BK,EAJ4B,KAINC,EAJM,KAK7BC,EAAWC,cALkB,EAOPC,wBAAc,CACtCC,MAAM,EACNC,aAAc,SAACC,GAAD,OAAOV,EAAoBU,EAAEC,UAAUC,kBATtB,WAO5BC,EAP4B,KAOjBC,EAPiB,KAY7BC,EAAmB,WACE,MAApBhB,IAEHK,EAAwBL,GACxBG,GAAkB,KAKtB,OAAO,oCACH,yBAAKc,UAAU,4BAA4BC,QAASF,GAChD,uBAAGC,UAAU,8BAEjB,yBAAKA,UAAU,6BAA6BE,IAAKL,GAC5C,IAAAjB,GAAM,KAANA,GAAW,SAACuB,EAAOC,GAAR,OAAc,yBAAKJ,UAAU,qBAAqBK,IAAKD,EAAED,EAAMG,KACvE,yBAAKA,IAAKH,EAAMG,IAAKL,QAASF,SAIrCV,GAAYS,GACT,oCACI,4BAAQE,UAAU,oDAAoDC,QAAS,kBAAMH,EAAOS,SACxF,uBAAGP,UAAU,+BAEjB,4BAAQA,UAAU,qDAAqDC,QAAS,kBAAMH,EAAOU,SACzF,uBAAGR,UAAU,iCAIzB,yBAAKA,UAAU,+BACTX,GAAY,IAAAT,GAAM,KAANA,GAAW,SAACuB,EAAOC,GAAR,OACrB,yBAAKC,IAAKD,EAAED,EAAMM,UAAWH,IAAKH,EAAMM,UAAWR,QAAS,kBAAMH,EAAOY,oBAAoBN,IACzFJ,UAAW,CAAC,4BAA6BI,GAAKrB,EAAmB,oCAAsC,IAAI4B,KAAK,UAGvHtB,GAAYS,GACT,UAAI,MAAAc,MAAMd,EAAOH,UAAUkB,OAAvB,UAAJ,QAA6C,SAACT,GAC1C,OACI,4BACIC,IAAKD,EACLH,QAAS,kBAAMH,EAAOY,oBAAoBN,IAC1CJ,UAAW,CAAC,iCAAkCjB,IAAqBqB,EAAI,oCAAsC,IAAIO,KAAK,WAM1I,kBAAC,IAAD,CACI/B,OAzCwB,IAAAA,GAAM,KAANA,GAAW,SAAAkC,GAAG,MAAK,CAAER,IAAKQ,EAAIC,aA0CtDC,YAAa,kBAAM5B,EAAwBD,EAAqB,IAChE8B,YAAa,kBAAM7B,EAAwBD,EAAqB,IAChE+B,aAAc/B,EACdgC,qBAAqB,EACrBC,OAAQnC,EACRoC,QAAS,kBAAMnC,GAAkB","file":"15.16bf1a52789a5c260d65.js","sourcesContent":["import React from \"react\"\r\nimport { useKeenSlider } from \"keen-slider/react\"\r\nimport \"keen-slider/keen-slider.min.css\"\r\nimport Lightbox from \"react-images\"\r\nimport useIsMobile from \"../Hooks/useIsMobile\"\r\n\r\nconst ProductImageSlideshow = props => {\r\n    const { images } = props\r\n    const [activeImageIndex, setActiveImageIndex] = React.useState(null)\r\n    const [isLightboxOpen, setIsLightboxOpen] = React.useState(false)\r\n    const [currentLightboxImage, setCurrentLightboxImage] = React.useState(null)\r\n    const isMobile = useIsMobile()\r\n\r\n    const [sliderRef, slider] = useKeenSlider({\r\n        loop: true,\r\n        slideChanged: (s) => setActiveImageIndex(s.details().relativeSlide),\r\n    })\r\n    \r\n    const openCurrentImage = () => {\r\n        if(activeImageIndex == null)\r\n            return\r\n        setCurrentLightboxImage(activeImageIndex)\r\n        setIsLightboxOpen(true)\r\n    }\r\n\r\n    const getLightboxImages = () => images.map(img => ({ src: img.original }))\r\n\r\n    return <>\r\n        <div className=\"product-images__zoom-icon\" onClick={openCurrentImage}>\r\n            <i className=\"far fa-search-plus fa-lg\"></i>\r\n        </div>\r\n        <div className=\"product-images keen-slider\" ref={sliderRef}>\r\n            {images.map((image, i) => <div className=\"keen-slider__slide\" key={i+image.src}>\r\n                <img src={image.src} onClick={openCurrentImage} />\r\n              </div>\r\n            )}\r\n        </div>\r\n        {isMobile && slider && \r\n            <>\r\n                <button className=\"product-images__arrow product-images__arrow--left\" onClick={() => slider.prev()}>\r\n                    <i className=\"fas fa-chevron-left fa-lg\"></i>\r\n                </button>\r\n                <button className=\"product-images__arrow product-images__arrow--right\" onClick={() => slider.next()}>\r\n                    <i className=\"fas fa-chevron-right fa-lg\"></i>\r\n                </button>\r\n            </>\r\n        }\r\n        <div className=\"product-images__thumbnails\">\r\n            {!isMobile && images.map((image, i) =>\r\n                <img key={i+image.thumbnail} src={image.thumbnail} onClick={() => slider.moveToSlideRelative(i)}\r\n                    className={[\"product-images__thumbnail\", i == activeImageIndex ? \"product-images__thumbnail--active\" : \"\"].join(\" \")} \r\n                />\r\n            )}\r\n            {isMobile && slider && \r\n                [...Array(slider.details().size).keys()].map((i) => {\r\n                    return (\r\n                        <button\r\n                            key={i}\r\n                            onClick={() => slider.moveToSlideRelative(i)}\r\n                            className={[\"product-images__thumbnail--dot\", activeImageIndex === i ? \"product-images__thumbnail--active\" : \"\"].join(\" \")}\r\n                        />\r\n                    )\r\n                }\r\n            )}\r\n        </div>\r\n        <Lightbox\r\n            images={getLightboxImages()}\r\n            onClickPrev={() => setCurrentLightboxImage(currentLightboxImage-1)}\r\n            onClickNext={() => setCurrentLightboxImage(currentLightboxImage+1)}\r\n            currentImage={currentLightboxImage}\r\n            backdropClosesModal={true} \r\n            isOpen={isLightboxOpen}\r\n            onClose={() => setIsLightboxOpen(false)} />\r\n    </>\r\n}\r\n\r\nexport default ProductImageSlideshow"],"sourceRoot":""}