{"version":3,"file":"147.18a8d7cc66c8cdbe6de3.js","mappings":"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","sources":["webpack:///./Scripts/Actions/LightboxImages.action.js","webpack:///./Scripts/_Solution/Components/LightboxImages.js"],"sourcesContent":["import {\n    LIGHTBOX_IMAGES_SET_CURRENT_IMAGE,\n    LIGHTBOX_IMAGES_SHOW,\n} from '../constants';\n\nexport const setCurrentIndex = (index) => ({\n    type: LIGHTBOX_IMAGES_SET_CURRENT_IMAGE,\n    payload: {\n        index,\n    },\n});\n\nexport const show = (visible) => ({\n    type: LIGHTBOX_IMAGES_SHOW,\n    payload: {\n        visible,\n    },\n});\n","import React, { Fragment, useCallback, useState, useEffect } from 'react';\nimport ReactPlayer from 'react-player';\nimport Modal from 'react-modal';\nimport { translate } from '../../Services/translation';\nimport 'react-responsive-carousel/lib/styles/carousel.min.css';\nimport { Carousel as Lightbox } from 'react-responsive-carousel';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { show, setCurrentIndex } from '../../Actions/LightboxImages.action';\nimport useSmoothHorizontalScroll from 'use-smooth-horizontal-scroll';\n\nconst customStyles = {\n    content: {\n        background: 'none',\n        padding: 0,\n        border: 'none',\n    },\n    overlay: {\n        background: 'rgba(0, 0, 0, 0.8)',\n        zIndex: 2003,\n    },\n};\nconst LightboxSettings = {\n    showStatus: false,\n    showIndicators: false,\n    useKeyboardArrows: true,\n    autoPlay: false,\n    autoFocus: true,\n};\n\n\nconst VideoSlide = ({ url, isSelected, className }) => (\n    <ReactPlayer controls={true} width=\"100%\" height=\"100%\" url={url} playing={false} />\n);\n\nconst renderThumbnails = (children) => {\n    const images = children.map((item, index) => {\n\n        if (!item || !item.props || !item.props.children) {\n            return undefined;\n        }\n\n        // find img to get source\n        const imageElement = item.props.children;\n        //const imageElement = item.props.children.find(\n        //    (ele) => ele.type === 'img'\n        //);\n\n\n        if (!imageElement || !imageElement.props || !imageElement.props.src) {\n            return undefined;\n        }\n        //const { html, type, src, videoSrc, title } = image;\n        return (\n            <div\n                key={index}\n                style={{\n                    backgroundImage: 'url(' + imageElement.props.src + ')',\n                }}\n                className={`thumbnail__image ${imageElement.props.className}`}\n            />\n        );\n    });\n\n    return images;\n};\n\nconst LightboxImages = (props) => {\n    const dispatch = useDispatch();\n    const flags = props.flags;\n    const { visible, index } = useSelector((state) => state.lightboxImages);\n    const onClose = useCallback(() => dispatch(show(false)), [dispatch]);\n    const onClickThumbnail = (index, type) => {\n        dispatch(show(true));\n        dispatch(setCurrentIndex(index));\n    };\n    const { scrollContainerRef, handleScroll, scrollBy, scrollTo, isAtStart, isAtEnd } = useSmoothHorizontalScroll();\n    const [lastScrollTop, setLastScrollTop] = useState(-1);\n\n    useEffect(() => {\n        if (!visible && lastScrollTop > -1) {\n            setTimeout(() => {\n                window.scrollTo({\n                    top: lastScrollTop,\n                });\n            }, 10);\n        }\n    }, [visible]);\n\n    return !props.images || props.images.length < 1 ? (\n        <Fragment />\n    ) : (\n        <Fragment>\n            <div className=\"row product-images\">\n                <div className=\"small-12 columns\">\n                    <figure className=\"product-detail__image-container\">\n                        {flags &&\n                            <div className=\"product-item__flag-wrapper\">\n                                {flags?.map((flag, index) => (\n                                    <span key={`flag-wrap-${index}`} className=\"product-item__flag\">{flag}</span>\n                                ))}\n                            </div>\n                        }\n                        <a\n                            data-src={props.images[0].src}\n                            href=\"#\"\n                            itemProp=\"url\"\n                            onClick={(e) => {\n                                e.preventDefault();\n                                setLastScrollTop(window.scrollY);\n                                onClickThumbnail(0);\n                            }}\n                            tilte={props.images[0].title}\n                            className=\"product-image\"\n                            rel=\"nofollow\"\n                            dangerouslySetInnerHTML={{\n                                __html: props.images[0].html,\n                            }}\n                        ></a>\n                    </figure>\n                </div>\n                {props.images?.length > 1 &&\n                    <div className={`small-12 columns product-detail__thumbnail-wrapper`}>\n                        {!(isAtStart && isAtEnd) &&\n                            <button className=\"product-detail__thumbnail-container-scroll--left\" onClick={() => scrollTo(-100)} disabled={isAtStart}>\n                                {'<'}\n                            </button>\n                        }\n                        <div className={`row ${isAtStart && !isAtEnd ? '' : 'align-center'} product-detail__thumbnail-container ${!(isAtStart && isAtEnd) ? 'scroll--active' : ''}`} ref={scrollContainerRef} onScroll={handleScroll} style={{ overflowX: \"scroll\" }}>\n                            {props.images.map(\n                                (image, index) => {\n                                    if (index > 0) {\n                                        const { html, type, src, videoSrc, title } = image;\n                                        return (\n                                            <div\n                                                className=\"product-detail__image-container columns product-detail__thumb-container\"\n                                                key={index}\n                                            >\n                                                <a\n                                                    data-src={src}\n                                                    data-video-src={videoSrc}\n                                                    href=\"#\"\n                                                    itemProp=\"url\"\n                                                    onClick={(e) => {\n                                                        e.preventDefault();\n                                                        onClickThumbnail(index, type);\n                                                    }}\n                                                    className={`${type === 'video' ? 'video' : ''} product-image`}\n                                                    rel=\"nofollow\"\n                                                    title={title}\n                                                    dangerouslySetInnerHTML={{\n                                                        __html: html,\n                                                    }}\n                                                ></a>\n                                            </div>\n                                        );\n                                    }\n                                }\n                            )}\n                        </div>\n                        {!(isAtStart && isAtEnd) &&\n                            <button className=\"product-detail__thumbnail-container-scroll--right\" onClick={() => scrollTo(100)} disabled={isAtEnd}>\n                                {'>'}\n                            </button>\n                        }\n                    </div>\n                }\n            </div>\n            <Modal\n                ariaHideApp={false}\n                preventScroll={true}\n                isOpen={visible}\n                onRequestClose={onClose}\n                style={customStyles}\n                shouldCloseOnOverlayClick={false}\n            >\n                <button\n                    onClick={onClose}\n                    className=\"light-box__close-btn\"\n                >\n                    <span>{translate('common.close')}</span>\n\n                </button>\n                <Lightbox\n                    {...LightboxSettings}\n                    selectedItem={index}\n                    className=\"light-box\"\n                    renderThumbs={renderThumbnails}\n                >\n                    {props.images.map((value, index) => {\n                        const { html, type, src, videoSrc, title } = value;\n                        return (\n                            <div\n                                key={`figure${index}`}\n                                className=\"light-box__container\"\n                            >\n                                {type === 'video' ? (<VideoSlide src={src} url={videoSrc} isSelected={true} className=\"light-box__video\" />) : (<img alt={title} src={src} className=\"light-box__image\" />)}\n\n                            </div>\n                        );\n                    })}\n                </Lightbox>\n            </Modal>\n        </Fragment>\n    );\n};\n\nexport default LightboxImages;\n"],"names":["show","visible","type","LIGHTBOX_IMAGES_SHOW","payload","customStyles","content","background","padding","border","overlay","zIndex","LightboxSettings","showStatus","showIndicators","useKeyboardArrows","autoPlay","autoFocus","VideoSlide","url","isSelected","className","React","ReactPlayer","controls","width","height","playing","renderThumbnails","children","map","item","index","props","imageElement","src","key","style","backgroundImage","dispatch","useDispatch","flags","useSelector","state","lightboxImages","onClose","useCallback","onClickThumbnail","LIGHTBOX_IMAGES_SET_CURRENT_IMAGE","setCurrentIndex","scrollContainerRef","handleScroll","scrollBy","scrollTo","isAtStart","isAtEnd","useSmoothHorizontalScroll","lastScrollTop","setLastScrollTop","useState","useEffect","setTimeout","window","top","images","length","Fragment","flag","href","itemProp","onClick","e","preventDefault","scrollY","tilte","title","rel","dangerouslySetInnerHTML","__html","html","disabled","ref","onScroll","overflowX","image","videoSrc","Modal","ariaHideApp","preventScroll","isOpen","onRequestClose","shouldCloseOnOverlayClick","translate","Lightbox","_extends","selectedItem","renderThumbs","value","alt"],"sourceRoot":""}