{"version":3,"file":"1.472e54486ea2be68.js","mappings":"uLAKO,MAOMA,EAAQC,IAAD,CAChBC,KAAMC,EAAAA,GACNC,QAAS,CACLH,a,gNCRR,MAEMI,EAAe,CACnBC,QAAS,CACPC,WAAY,OACZC,QAAS,EACTC,OAAQ,QAEVC,QAAS,CACPH,WAAY,qBACZI,OAAQ,OAGNC,EAAmB,CACvBC,YAAY,EACZC,gBAAgB,EAChBC,mBAAmB,EACnBC,WAAY,GACZC,UAAU,EACVC,WAAW,GAGPC,EAAoBC,GACTA,EAASC,KAAI,CAACC,EAAMC,KACjC,IAAKD,GAAME,OAAOJ,SAAU,OAE5B,MAAMK,EAAeH,EAAKE,MAAMJ,SAASM,MAAMC,GAAqB,QAAbA,EAAIzB,OAE3D,OAAKuB,GAAcD,OAAOI,IAGxB,uBACEC,IAAKN,EACLO,MAAO,CACLC,gBAAkB,OAAMN,EAAaD,MAAMI,QAE7CI,UAAU,0BARd,CAEA,IA8GJ,EAhGwBR,IACtB,MAAMS,GAAWC,EAAAA,EAAAA,OACX,QAAEjC,EAAF,MAAWsB,IAAUY,EAAAA,EAAAA,KAAaC,GAAUA,EAAMC,iBAClDC,GAAUC,EAAAA,EAAAA,cAAY,IAAMN,EAASjC,GAAK,KAAS,CAACiC,IACpDO,EAAoBjB,IACxBU,EAASjC,GAAK,IACdiC,EDpD4BV,KAAD,CAC3BrB,KAAMuC,EAAAA,GACNrC,QAAS,CACLmB,WCiDKmB,CAAgBnB,GAAzB,EAGA,OAAQC,EAAMmB,QAAUnB,EAAMmB,OAAOC,OAAS,EAC1C,gBAAC,EAAAC,SAAD,MAEA,gBAAC,EAAAA,SAAD,KACI,uBAAKb,UAAU,kCACX,uBAAKA,UAAU,sCACX,0BAAQA,UAAU,mCACd,qBACI,WAAUR,EAAMmB,OAAO,GAAGf,IAC1BkB,KAAK,IACLC,SAAS,MACTC,QAAUC,IACNA,EAAEC,iBACFV,EAAiB,EAAjB,EAEJR,UAAU,gBACVmB,IAAI,WACJC,wBAAyB,CACrBC,OAAQ7B,EAAMmB,OAAO,GAAGW,UAKxC,uBAAKtB,UAAU,8BACX,uBAAKA,UAAU,kBACVR,EAAMmB,OAAOtB,KACV,CAACkC,EAAOhC,IACJA,EAAQ,GACJ,uBACIS,UAAU,2CACVH,IAAKN,GAEL,qBACI,WAAUgC,EAAM3B,IAChBkB,KAAK,IACLC,SAAS,MACTC,QAAUC,IACNA,EAAEC,iBACFV,EAAiBjB,EAAjB,EAEJS,UAAU,gBACVmB,IAAI,WACJC,wBAAyB,CACrBC,OACI7B,EAAMmB,OAAOpB,GAAO+B,cAS5D,gBAAC,IAAD,CACIE,aAAa,EACbC,eAAe,EACfC,OAAQzD,EACR0D,eAAgBrB,EAChBR,MAAOzB,EACPuD,2BAA2B,GAE3B,gBAAC,KAAD,KACQhD,EADR,CAEIiD,aAActC,EACdS,UAAU,YACV8B,aAAc3C,IAEbK,EAAMmB,OAAOtB,KAAI,CAAC0C,EAAOxC,IACtB,uBACIM,IAAM,SAAQN,IACdS,UAAU,wBAEV,0BACIgB,QAASV,EACTN,UAAU,wBAFd,KAMA,uBAAKJ,IAAKmC,EAAMnC,IAAKI,UAAU,0BA9EvD,C","sources":["webpack:///./Scripts/Actions/LightboxImages.action.js","webpack:///./Scripts/Components/LightboxImages.js"],"sourcesContent":["import {\r\n    LIGHTBOX_IMAGES_SET_CURRENT_IMAGE,\r\n    LIGHTBOX_IMAGES_SHOW,\r\n} from '../constants';\r\n\r\nexport const setCurrentIndex = (index) => ({\r\n    type: LIGHTBOX_IMAGES_SET_CURRENT_IMAGE,\r\n    payload: {\r\n        index,\r\n    },\r\n});\r\n\r\nexport const show = (visible) => ({\r\n    type: LIGHTBOX_IMAGES_SHOW,\r\n    payload: {\r\n        visible,\r\n    },\r\n});\r\n","import React, { Fragment, useCallback } 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\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { show, setCurrentIndex } from '../Actions/LightboxImages.action';\r\n\r\nconst LIGHT_BOX = 'light-box';\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?.props?.children) return undefined;\r\n\r\n    const imageElement = item.props.children.find((ele) => ele.type === 'img');\r\n\r\n    if (!imageElement?.props?.src) return undefined;\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 = (props) => {\r\n  const dispatch = useDispatch();\r\n  const { visible, index } = useSelector((state) => state.lightboxImages);\r\n  const onClose = useCallback(() => dispatch(show(false)), [dispatch]);\r\n  const onClickThumbnail = (index) => {\r\n    dispatch(show(true));\r\n    dispatch(setCurrentIndex(index));\r\n  };\r\n\r\n    return !props.images || props.images.length < 1 ? (\r\n        <Fragment />\r\n    ) : (\r\n        <Fragment>\r\n            <div className=\"product-detail__product-images\">\r\n                <div className=\"product-detail__main-image-wrapper\">\r\n                    <figure className=\"product-detail__image-container\">\r\n                        <a\r\n                            data-src={props.images[0].src}\r\n                            href=\"#\"\r\n                            itemProp=\"url\"\r\n                            onClick={(e) => {\r\n                                e.preventDefault();\r\n                                onClickThumbnail(0);\r\n                            }}\r\n                            className=\"product-image\"\r\n                            rel=\"nofollow\"\r\n                            dangerouslySetInnerHTML={{\r\n                                __html: props.images[0].html,\r\n                            }}\r\n                        ></a>\r\n                    </figure>\r\n                </div>\r\n                <div className=\"product-detail__thumbnails\">\r\n                    <div className=\"thumbnails-row\">\r\n                        {props.images.map(\r\n                            (image, index) =>\r\n                                index > 0 && (\r\n                                    <div\r\n                                        className=\"product-detail__image-container large-12\"\r\n                                        key={index}\r\n                                    >\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                                                onClickThumbnail(index);\r\n                                            }}\r\n                                            className=\"product-image\"\r\n                                            rel=\"nofollow\"\r\n                                            dangerouslySetInnerHTML={{\r\n                                                __html:\r\n                                                    props.images[index].html,\r\n                                            }}\r\n                                        ></a>\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                    {props.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 src={value.src} className=\"light-box__image\" />\r\n                        </div>\r\n                    ))}\r\n                </Lightbox>\r\n            </Modal>\r\n        </Fragment>\r\n    );\r\n};\r\n\r\nexport default LightboxImages;\r\n"],"names":["show","visible","type","LIGHTBOX_IMAGES_SHOW","payload","customStyles","content","background","padding","border","overlay","zIndex","LightboxSettings","showStatus","showIndicators","useKeyboardArrows","thumbWidth","autoPlay","autoFocus","renderThumbnails","children","map","item","index","props","imageElement","find","ele","src","key","style","backgroundImage","className","dispatch","useDispatch","useSelector","state","lightboxImages","onClose","useCallback","onClickThumbnail","LIGHTBOX_IMAGES_SET_CURRENT_IMAGE","setCurrentIndex","images","length","Fragment","href","itemProp","onClick","e","preventDefault","rel","dangerouslySetInnerHTML","__html","html","image","ariaHideApp","preventScroll","isOpen","onRequestClose","shouldCloseOnOverlayClick","selectedItem","renderThumbs","value"],"sourceRoot":""}