{"version":3,"file":"Scripts_Components_LightboxImages_js.js","mappings":"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","sources":["webpack:///./Scripts/Actions/LightboxImages.action.js","webpack:///./Scripts/Components/LightboxImages.js"],"sourcesContent":["import { LIGHTBOX_IMAGES_SET_CURRENT_IMAGE, LIGHTBOX_IMAGES_SHOW } 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-responsive-carousel/lib/styles/carousel.min.css\";\r\n\r\nimport React, { Fragment, useCallback, useEffect, useState } from \"react\";\r\nimport Modal from \"react-modal\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { Carousel as Lightbox } from \"react-responsive-carousel\";\r\n\r\nimport { setCurrentIndex, show } from \"../Actions/LightboxImages.action\";\r\n\r\nconst customStylesMobileModal = {\r\n    content: {\r\n        inset: \"50% 0 -50% 0\",\r\n        background: \"none\",\r\n        padding: 0,\r\n        border: \"none\",\r\n        transform: \"translateY(-50%)\",\r\n        width: \"100%\",\r\n        display: \"flex\",\r\n        justifyContent: \" center\",\r\n        flexDirection: \"column\",\r\n    },\r\n    overlay: {\r\n        zIndex: 2003,\r\n    },\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 = (props) => {\r\n    const dispatch = useDispatch();\r\n    const { visible, index } = useSelector((state) => state.lightboxImages);\r\n    const [modalImage, setModalImage] = useState(null);\r\n    const [showModalImage, setShowModalImage] = useState(false);\r\n    useEffect(() => {\r\n        // for (let i = 0; i < props.images.length; i++) {\r\n        //     const element = props.images[i];\r\n        //     for (const [key, value] of Object.entries(element)) {\r\n        //         console.log(`${key}: ${value}`);\r\n        //     }\r\n        // }\r\n    });\r\n    const onClose = useCallback(() => dispatch(show(false)), [dispatch]);\r\n    const onClickMainImage = (index) => {\r\n        dispatch(show(true));\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=\"row product-images\">\r\n                <div className=\"small-12 large-9 large-order-1 hide-for-medium\">\r\n                    <Lightbox\r\n                        infiniteLoop\r\n                        showStatus={false}\r\n                        showThumbs={false}\r\n                    >\r\n                        {props.images.map((image, index) => (\r\n                            <div\r\n                                className=\"product-image\"\r\n                                onClick={(e) => {\r\n                                    e.preventDefault();\r\n                                    setModalImage(image.src);\r\n                                    setShowModalImage(true);\r\n                                }}\r\n                                key={index}\r\n                                // dangerouslySetInnerHTML={{\r\n                                //     __html: image.html,\r\n                                // }}\r\n                            >\r\n                                <img src={image.src} />\r\n                            </div>\r\n                        ))}\r\n                    </Lightbox>\r\n                    <Modal\r\n                        ariaHideApp={false}\r\n                        preventScroll={true}\r\n                        isOpen={showModalImage}\r\n                        onRequestClose={() => setShowModalImage(false)}\r\n                        style={customStylesMobileModal}\r\n                        shouldCloseOnOverlayClick={true}\r\n                    >\r\n                        <button\r\n                            onClick={() => setShowModalImage(false)}\r\n                            className=\"light-box__close-btn\"\r\n                        >\r\n                            &times;\r\n                        </button>\r\n                        <img\r\n                            className=\"light-box__img-mobile\"\r\n                            src={modalImage}\r\n                            alt=\"\"\r\n                        />\r\n                    </Modal>\r\n                </div>\r\n                <div className=\"small-12 large-9 columns large-order-1 show-for-medium\">\r\n                    <figure className=\"product-detail__image-container\">\r\n                        <button\r\n                            onClick={(e) => {\r\n                                e.preventDefault();\r\n                                onClickMainImage(index);\r\n                            }}\r\n                            className=\"product-image\"\r\n                            // dangerouslySetInnerHTML={{\r\n                            //     __html: props.images[index].html,\r\n                            // }}\r\n                        >\r\n                            <img src={props.images[index].src} />\r\n                        </button>\r\n                    </figure>\r\n                </div>\r\n                <div className=\"small-12 large-3 columns medium-flex-dir-column show-for-medium\">\r\n                    <div className=\"row\">\r\n                        {props.images.map((image, index) => (\r\n                            <div\r\n                                className=\"product-detail__image-container columns large-12\"\r\n                                key={index}\r\n                            >\r\n                                <button\r\n                                    data-src={image.src}\r\n                                    itemProp=\"url\"\r\n                                    onClick={(e) => {\r\n                                        e.preventDefault();\r\n                                        dispatch(setCurrentIndex(index));\r\n                                    }}\r\n                                    className=\"product-detail__image-small\"\r\n                                    dangerouslySetInnerHTML={{\r\n                                        __html: props.images[index].html,\r\n                                    }}\r\n                                ></button>\r\n                            </div>\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":["LIGHTBOX_IMAGES_SET_CURRENT_IMAGE","LIGHTBOX_IMAGES_SHOW","setCurrentIndex","index","type","payload","show","visible","React","Fragment","useCallback","useEffect","useState","Modal","useDispatch","useSelector","Carousel","Lightbox","customStylesMobileModal","content","inset","background","padding","border","transform","width","display","justifyContent","flexDirection","overlay","zIndex","customStyles","LightboxSettings","showStatus","showIndicators","useKeyboardArrows","thumbWidth","autoPlay","autoFocus","renderThumbnails","children","images","map","item","props","undefined","imageElement","find","ele","src","createElement","key","style","backgroundImage","className","LightboxImages","dispatch","state","lightboxImages","modalImage","setModalImage","showModalImage","setShowModalImage","onClose","onClickMainImage","length","infiniteLoop","showThumbs","image","onClick","e","preventDefault","ariaHideApp","preventScroll","isOpen","onRequestClose","shouldCloseOnOverlayClick","alt","itemProp","dangerouslySetInnerHTML","__html","html","_extends","selectedItem","renderThumbs","value"],"sourceRoot":""}