{"version":3,"sources":["webpack:///./Scripts/Components/LightboxImages.js"],"names":["customStyles","content","background","padding","border","overlay","zIndex","LightboxSettings","showStatus","showIndicators","useKeyboardArrows","thumbWidth","autoPlay","autoFocus","renderThumbnails","children","map","item","index","props","imageElement","find","ele","type","src","key","style","backgroundImage","className","images","flag","emblem","container","onClose","setVisible","selectedIndex","setNewIndex","useState","visible","setIndex","useEffect","classList","remove","RenderEmblem","image","alt","backgroundColor","color","textColor","text","length","data-src","href","itemProp","onClick","e","preventDefault","onClickThumbnail","rel","dangerouslySetInnerHTML","__html","html","height","width","points","fill","ariaHideApp","preventScroll","isOpen","onRequestClose","shouldCloseOnOverlayClick","selectedItem","renderThumbs","value"],"mappings":"qXAKA,MAAMA,EAAe,CACjBC,QAAS,CACLC,WAAY,OACZC,QAAS,EACTC,OAAQ,QAEZC,QAAS,CACLH,WAAY,qBACZI,OAAQ,OAGVC,EAAmB,CACrBC,YAAY,EACZC,gBAAgB,EAChBC,mBAAmB,EACnBC,WAAY,GACZC,UAAU,EACVC,WAAW,GAGTC,EAAoBC,GACPA,EAASC,KAAI,CAACC,EAAMC,KAC/B,IAAKD,IAASA,EAAKE,QAAUF,EAAKE,MAAMJ,SACpC,OAIJ,MAAMK,EAAeH,EAAKE,MAAMJ,SAASM,MACpCC,GAAqB,QAAbA,EAAIC,OAEjB,OAAKH,GAAiBA,EAAaD,OAAUC,EAAaD,MAAMK,IAK5D,uBACIC,IAAKP,EACLQ,MAAO,CACHC,gBAAiB,OAASP,EAAaD,MAAMK,IAAM,KAEvDI,UAAU,0BAVlB,KAmLR,EAjKuB,EAAGC,SAAQC,OAAMC,SAAQC,gBAC5C,MAAMC,EAAU,IAAMC,GAAW,IAK1BC,EAAeC,IAAeC,cAAS,IACvCC,EAASJ,IAAcG,eAAS,IAChCnB,EAAOqB,IAAYF,cAAS,IAEnCG,gBAAU,KACFR,GACAA,EAAUS,UAAUC,OAAO,wCAEhC,CAACV,IAEJ,MAAMW,EAAe,EAAGZ,YACfA,EAID,gCACKA,EAAOa,MACJ,uBAAKhB,UAAU,gCACX,uBAAKJ,IAAKO,EAAOa,MAAOC,IAAI,oBAGhC,uBACIjB,UAAU,yBACVF,MAAO,CACHoB,gBAAiBf,EAAOe,kBAG3Bf,GACG,qBAAGL,MAAO,CAAEqB,MAAOhB,EAAOiB,YACrBjB,EAAOkB,QAjBrB,KA0Bf,OACIpB,GAAQqB,OAAS,GACb,gCACI,uBAAKtB,UAAU,sBACX,uBAAKA,UAAU,kDACX,0BAAQA,UAAU,mCACd,qBACIuB,WAAUtB,EAAOM,GAAeX,IAChC4B,KAAK,IACLC,SAAS,MACTC,QAAUC,IACNA,EAAEC,iBArDRtC,KACtBgB,GAAW,GACXK,EAASrB,IAoDmBuC,CAAiBtB,IAErBP,UAAU,8CACV8B,IAAI,WACJC,wBAAyB,CACrBC,OAAQ/B,EAAOM,GAAe0B,QAIrC/B,GACG,uBACIF,UAAU,uBACVF,MAAO,CACHoB,gBAAiBhB,EAAKgB,kBAG1B,2BACI,qBAAGpB,MAAO,CAAEqB,MAAOjB,EAAKkB,YACnBlB,EAAKmB,OAGd,uBAAKa,OAAO,KAAKC,MAAM,MACnB,2BACIC,OAAO,0BACPtC,MAAO,CACHuC,KAAMnC,EAAKgB,qBAO/B,gBAACH,EAAD,CAAcZ,OAAQA,MAG9B,uBAAKH,UAAU,6BACX,uBAAKA,UAAU,2CACVC,EAAOb,KACJ,CAAC4B,EAAO1B,IACJA,GAAS,GACL,uBACIU,UAAU,4EACVH,IAAKP,GAEL,uBAAKU,UAAU,2CACX,qBACIuB,WAAUP,EAAMpB,IAChB4B,KAAK,IACLC,SAAS,MACTC,QAAUC,IACNA,EAAEC,iBACFpB,EAAYlB,IAEhBU,UAAU,gBACV8B,IAAI,WACJC,wBAAyB,CACrBC,OACI/B,EAAOX,GAAO2C,eAU1D,gBAAC,IAAD,CACIK,aAAa,EACbC,eAAe,EACfC,OAAQ9B,EACR+B,eAAgBpC,EAChBP,MAAO1B,EACPsE,2BAA2B,GAE3B,gBAAC,KAAD,KACQ/D,EADR,CAEIgE,aAAcrD,EACdU,UAAU,YACV4C,aAAc1D,IAEbe,EAAOb,KAAI,CAACyD,EAAOvD,IAChB,uBACIO,IAAM,SAAQP,IACdU,UAAU,wBAEV,0BACI0B,QAASrB,EACTL,UAAU,wBAFd,KAMA,uBACIJ,IAAKiD,EAAMjD,IACXI,UAAU","file":"277.23e2520371d921b61ea4.js","sourcesContent":["import React, { useState, useEffect } from 'react';\r\nimport Modal from 'react-modal';\r\nimport 'react-responsive-carousel/lib/styles/carousel.min.css';\r\nimport { Carousel as Lightbox } from 'react-responsive-carousel';\r\n\r\nconst customStyles = {\r\n    content: {\r\n        background: 'none',\r\n        padding: 0,\r\n        border: 'none',\r\n    },\r\n    overlay: {\r\n        background: 'rgba(0, 0, 0, 0.8)',\r\n        zIndex: 2003,\r\n    },\r\n};\r\nconst LightboxSettings = {\r\n    showStatus: false,\r\n    showIndicators: false,\r\n    useKeyboardArrows: true,\r\n    thumbWidth: 50,\r\n    autoPlay: false,\r\n    autoFocus: true,\r\n};\r\n\r\nconst renderThumbnails = (children) => {\r\n    const images = children.map((item, index) => {\r\n        if (!item || !item.props || !item.props.children) {\r\n            return undefined;\r\n        }\r\n\r\n        // find img to get source\r\n        const imageElement = item.props.children.find(\r\n            (ele) => ele.type === 'img'\r\n        );\r\n        if (!imageElement || !imageElement.props || !imageElement.props.src) {\r\n            return undefined;\r\n        }\r\n\r\n        return (\r\n            <div\r\n                key={index}\r\n                style={{\r\n                    backgroundImage: 'url(' + imageElement.props.src + ')',\r\n                }}\r\n                className=\"thumbnail__image\"\r\n            />\r\n        );\r\n    });\r\n\r\n    return images;\r\n};\r\n\r\nconst LightboxImages = ({ images, flag, emblem, container }) => {\r\n    const onClose = () => setVisible(false);\r\n    const onClickThumbnail = (index) => {\r\n        setVisible(true);\r\n        setIndex(index);\r\n    };\r\n    const [selectedIndex, setNewIndex] = useState(0);\r\n    const [visible, setVisible] = useState(false);\r\n    const [index, setIndex] = useState(0);\r\n\r\n    useEffect(() => {\r\n        if (container) {\r\n            container.classList.remove('product-images__placeholder-height');\r\n        }\r\n    }, [container]);\r\n\r\n    const RenderEmblem = ({ emblem }) => {\r\n        if (!emblem) {\r\n            return null;\r\n        }\r\n        return (\r\n            <>\r\n                {emblem.image ? (\r\n                    <div className=\"product-images__emblem-image\">\r\n                        <img src={emblem.image} alt=\"Product Emblem\" />\r\n                    </div>\r\n                ) : (\r\n                    <div\r\n                        className=\"product-images__emblem\"\r\n                        style={{\r\n                            backgroundColor: emblem.backgroundColor,\r\n                        }}\r\n                    >\r\n                        {emblem && (\r\n                            <p style={{ color: emblem.textColor }}>\r\n                                {emblem.text}\r\n                            </p>\r\n                        )}\r\n                    </div>\r\n                )}\r\n            </>\r\n        );\r\n    };\r\n\r\n    return (\r\n        images?.length > 0 && (\r\n            <>\r\n                <div className=\"row product-images\">\r\n                    <div className=\"small-12 large-12 columns product-images--main\">\r\n                        <figure className=\"product-detail__image-container\">\r\n                            <a\r\n                                data-src={images[selectedIndex].src}\r\n                                href=\"#\"\r\n                                itemProp=\"url\"\r\n                                onClick={(e) => {\r\n                                    e.preventDefault();\r\n                                    onClickThumbnail(selectedIndex);\r\n                                }}\r\n                                className=\"product-detail__image-container--main-image\"\r\n                                rel=\"nofollow\"\r\n                                dangerouslySetInnerHTML={{\r\n                                    __html: images[selectedIndex].html,\r\n                                }}\r\n                            ></a>\r\n\r\n                            {flag && (\r\n                                <div\r\n                                    className=\"product-images__flag\"\r\n                                    style={{\r\n                                        backgroundColor: flag.backgroundColor,\r\n                                    }}\r\n                                >\r\n                                    <div>\r\n                                        <p style={{ color: flag.textColor }}>\r\n                                            {flag.text}\r\n                                        </p>\r\n                                    </div>\r\n                                    <svg height=\"30\" width=\"40\">\r\n                                        <polygon\r\n                                            points=\"0,0 5,0 35,15 5,30 0,30\"\r\n                                            style={{\r\n                                                fill: flag.backgroundColor,\r\n                                            }}\r\n                                        />\r\n                                    </svg>\r\n                                </div>\r\n                            )}\r\n\r\n                            <RenderEmblem emblem={emblem} />\r\n                        </figure>\r\n                    </div>\r\n                    <div className=\"small-12 large-12 columns\">\r\n                        <div className=\"row product-detail__thumbnail-container\">\r\n                            {images.map(\r\n                                (image, index) =>\r\n                                    index >= 0 && (\r\n                                        <div\r\n                                            className=\"product-detail__image-container product-detail__thumbnail-image-container\"\r\n                                            key={index}\r\n                                        >\r\n                                            <div className=\"product-detail__image-container--shadow\">\r\n                                                <a\r\n                                                    data-src={image.src}\r\n                                                    href=\"#\"\r\n                                                    itemProp=\"url\"\r\n                                                    onClick={(e) => {\r\n                                                        e.preventDefault();\r\n                                                        setNewIndex(index);\r\n                                                    }}\r\n                                                    className=\"product-image\"\r\n                                                    rel=\"nofollow\"\r\n                                                    dangerouslySetInnerHTML={{\r\n                                                        __html:\r\n                                                            images[index].html,\r\n                                                    }}\r\n                                                ></a>\r\n                                            </div>\r\n                                        </div>\r\n                                    )\r\n                            )}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <Modal\r\n                    ariaHideApp={false}\r\n                    preventScroll={true}\r\n                    isOpen={visible}\r\n                    onRequestClose={onClose}\r\n                    style={customStyles}\r\n                    shouldCloseOnOverlayClick={false}\r\n                >\r\n                    <Lightbox\r\n                        {...LightboxSettings}\r\n                        selectedItem={index}\r\n                        className=\"light-box\"\r\n                        renderThumbs={renderThumbnails}\r\n                    >\r\n                        {images.map((value, index) => (\r\n                            <div\r\n                                key={`figure${index}`}\r\n                                className=\"light-box__container\"\r\n                            >\r\n                                <button\r\n                                    onClick={onClose}\r\n                                    className=\"light-box__close-btn\"\r\n                                >\r\n                                    &times;\r\n                                </button>\r\n                                <img\r\n                                    src={value.src}\r\n                                    className=\"light-box__image\"\r\n                                />\r\n                            </div>\r\n                        ))}\r\n                    </Lightbox>\r\n                </Modal>\r\n            </>\r\n        )\r\n    );\r\n};\r\n\r\nexport default LightboxImages;\r\n"],"sourceRoot":""}