{"version":3,"sources":["webpack:///./Scripts/Actions/LightboxImages.action.js","webpack:///./Scripts/Components/LightboxImages.js"],"names":["props","dispatch","useDispatch","visible","index","useSelector","state","lightboxImages","useCallback","type","LIGHTBOX_IMAGES_SHOW","payload","show","imageIndex","setImageIndex","useState","swapImage","i","images","length","React","Fragment","className","onClick","style","transform","width","height","viewBox","fill","xmlns","d","dangerouslySetInnerHTML","__html","html","map","image","key","e"],"mappings":"4JAKO,MCkJP,EAhGwBA,IACpB,MAAMC,GAAWC,WACX,QAAEC,EAAO,MAAEC,IAAUC,SAAaC,GAAUA,EAAMC,kBACxCC,kBAAY,IAAMP,ED9CjBE,KAAO,CACxBM,KAAMC,KACNC,QAAS,CACLR,aC2CuCS,EAAK,KAAS,CAACX,IAE1D,IAAKY,EAAYC,IAAiBC,cAAS,GAC3C,MAAMC,EAAaC,IACXA,IAAMjB,EAAMkB,OAAOC,SACnBF,EAAI,GAEJA,EAAI,IACJA,EAAIjB,EAAMkB,OAAOC,OAAS,GAE9BL,EAAcG,EAAE,EAGpB,OAAQjB,EAAMkB,QAAUlB,EAAMkB,OAAOC,OAAS,EAC1CC,gBAACC,WAAQ,MAETD,gBAACC,WAAQ,KACLD,gBAAA,OAAKE,UAAU,kBACXF,gBAAA,WAASE,UAAU,yBACfF,gBAAA,UAAQE,UAAU,oBAAoBC,QAASA,KAAQP,EAAUH,EAAa,EAAE,GAC5EO,gBAAA,OAAKI,MAAO,CAAEC,UAAW,kBAAmBC,MAAM,IAAIC,OAAO,KAAKC,QAAQ,WAAWC,KAAK,OAAOC,MAAM,8BACnGV,gBAAA,QAAMW,EAAE,4MAA4MF,KAAK,cAGjOT,gBAAA,UACIE,UAAU,qBACVU,wBAAyB,CACrBC,OAAQjC,EAAMkB,OAAOL,GAAYqB,QAIzCd,gBAAA,UAAQE,UAAU,oBAAoBC,QAASA,KAAQP,EAAUH,EAAa,EAAE,GAC5EO,gBAAA,OAAKM,MAAM,IAAIC,OAAO,KAAKC,QAAQ,WAAWC,KAAK,OAAOC,MAAM,8BAC5DV,gBAAA,QAAMW,EAAE,4MAA4MF,KAAK,eAKrOT,gBAAA,OAAKE,UAAU,sBACVtB,EAAMkB,OAAOiB,KACV,CAACC,EAAOhC,IAEAgB,gBAAA,UACIE,UAAY,sBAAoBlB,IAAUS,EAAa,SAAW,IAClEwB,IAAKjC,EACL4B,wBAAyB,CACrBC,OACIG,EAAMF,MAEdX,QAAUe,IACNtB,EAAUZ,EAAM,OAOpCgB,gBAAA,OAAKE,UAAU,eAAeT,EAAa,EAAE,IAAGb,EAAMkB,OAAOC,SAiC5E,C","file":"496.c85f7028ed3ac332804e.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, useState } from 'react';\r\n//import Modal from 'react-modal';\r\nimport 'react-responsive-carousel/lib/styles/carousel.min.css';\r\n//import { 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 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 onClose = useCallback(() => dispatch(show(false)), [dispatch]);\r\n\r\n    let [imageIndex, setImageIndex] = useState(0)\r\n    const swapImage = (i) => {\r\n        if (i === props.images.length) {\r\n            i = 0\r\n        }\r\n        if (i < 0) {\r\n            i = props.images.length - 1\r\n        }\r\n        setImageIndex(i)\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-images\">\r\n                <section className=\"product_image-section\">\r\n                    <button className=\"image_prev-button\" onClick={() => { swapImage(imageIndex - 1) }}>\r\n                        <svg style={{ transform: \"rotate(180deg)\"}} width=\"8\" height=\"14\" viewBox=\"0 0 8 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                            <path d=\"M5.46689 7.00012L0.5 2.03322L1.69113 0.842285L7.25348 6.40465C7.41122 6.56258 7.49998 6.77675 7.49998 7.00012C7.49998 7.22349 7.41122 7.43766 7.25348 7.59558L1.69113 13.1579L0.5 11.967L5.46689 7.00012Z\" fill=\"#212121\" />\r\n                        </svg>\r\n                    </button>\r\n                    <figure\r\n                        className=\"product_main-image\"\r\n                        dangerouslySetInnerHTML={{\r\n                            __html: props.images[imageIndex].html,\r\n                        }}\r\n                    >\r\n                    </figure>\r\n                    <button className=\"image_next-button\" onClick={() => { swapImage(imageIndex + 1) }}>\r\n                        <svg width=\"8\" height=\"14\" viewBox=\"0 0 8 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                            <path d=\"M5.46689 7.00012L0.5 2.03322L1.69113 0.842285L7.25348 6.40465C7.41122 6.56258 7.49998 6.77675 7.49998 7.00012C7.49998 7.22349 7.41122 7.43766 7.25348 7.59558L1.69113 13.1579L0.5 11.967L5.46689 7.00012Z\" fill=\"#212121\" />\r\n                        </svg>\r\n                    </button>\r\n                </section>\r\n                \r\n                <div className=\"product_thumbnails\">\r\n                    {props.images.map(\r\n                        (image, index) =>\r\n                            (\r\n                                <button\r\n                                    className={`product_thumbnail ${index === imageIndex ? 'active' : ''}`}\r\n                                    key={index}\r\n                                    dangerouslySetInnerHTML={{\r\n                                        __html:\r\n                                            image.html,\r\n                                    }}\r\n                                    onClick={(e) => {\r\n                                        swapImage(index);\r\n                                    }}\r\n                                >\r\n                                </button>\r\n                            )\r\n                    )}\r\n                </div>\r\n                    <div className=\"image-index\">{imageIndex + 1}/{ props.images.length }</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 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"],"sourceRoot":""}