{"version":3,"file":"550.cc12b2255f9afa4e43e5.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":["show","visible","type","LIGHTBOX_IMAGES_SHOW","payload","customStylesMobileModal","content","inset","background","padding","border","transform","width","display","justifyContent","flexDirection","overlay","zIndex","customStyles","LightboxSettings","showStatus","showIndicators","useKeyboardArrows","thumbWidth","autoPlay","autoFocus","renderThumbnails","children","map","item","index","props","imageElement","find","ele","src","React","key","style","backgroundImage","className","dispatch","useDispatch","useSelector","state","lightboxImages","modalImage","setModalImage","useState","showModalImage","setShowModalImage","useEffect","onClose","useCallback","images","length","Fragment","Lightbox","infiniteLoop","showThumbs","image","onClick","e","preventDefault","Modal","ariaHideApp","preventScroll","isOpen","onRequestClose","shouldCloseOnOverlayClick","alt","itemProp","LIGHTBOX_IMAGES_SET_CURRENT_IMAGE","setCurrentIndex","dangerouslySetInnerHTML","__html","html","_extends","selectedItem","renderThumbs","value"],"sourceRoot":""}