{"version":3,"file":"936.43cd2f15d055de20.js","mappings":"sKAKA,MAwIA,EAtHwBA,IACpB,MAAOC,EAASC,IAAcC,EAAAA,EAAAA,WAAS,IAChCC,EAAaC,IAAkBF,EAAAA,EAAAA,UAAS,IACxCG,EAAgBC,IAAqBJ,EAAAA,EAAAA,UAAS,IAC9CK,EAAOC,IAAYN,EAAAA,EAAAA,UAASO,OAAOC,YACpCC,EAAWJ,GAAS,IACpBK,EAAWL,GAAS,KAAOA,GAAS,KA0BpCM,EAAyBA,KAC3BL,EAASC,OAAOC,WAAW,EAc/B,IAXAI,EAAAA,EAAAA,YAAU,KAtDeC,EAACJ,EAAUC,KAChBI,SAASC,iBAAiB,uCAC9BC,OAAS,GACrB,IAAIC,EAAAA,GAAO,sCACP,CACIC,UAAW,MACXC,OAAQV,EAAW,QAAU,QAC7BJ,MAAOI,EAAW,OAAS,MAC3BW,QAASX,EAAW,EAAIC,EAAW,EAAI,EACvCW,QAAS,EACTC,IAAK,OACLC,QAAQ,EACRC,KAAM,UACPC,OAEX,EAwCIZ,CAAqBJ,EAAUC,EAAS,GACzC,CAACD,EAAUC,KAEdE,EAAAA,EAAAA,YAAU,KACNL,OAAOmB,iBAAiB,SAAUf,GAC3B,KACHJ,OAAOoB,oBAAoB,SAAUhB,EAAuB,IAEjE,IAECd,EAAM+B,QAAU/B,EAAM+B,OAAOZ,OAAS,EAAG,CACzC,MAAMa,EAAgBhC,EAAM+B,OAAOzB,GAAgB2B,KAC7CC,EAAgBlC,EAAM+B,OAAOzB,GAAgB6B,IACnD,OACIC,EAAAA,cAACC,EAAAA,SAAQ,KACLD,EAAAA,cAAA,OAAKE,UAAU,sBACXF,EAAAA,cAAA,OAAKE,UAAU,wCACXF,EAAAA,cAAA,UAAQE,UAAY,wCAChBF,EAAAA,cAAA,KACI,WAAUF,EACVK,KAAK,IACLC,SAAS,MACTC,QAAUC,IAjCjBC,MAkCWD,EAAEE,iBAlCbD,EAmCuBrC,EAlCxCJ,GAAYD,GACZI,EAAesC,GACfpC,EAAkBoC,EAgCqC,EAE/BL,UAAU,gBACVO,IAAI,WACJC,wBAAyB,CACrBC,OAAQf,OAKxBI,EAAAA,cAAA,OAAKE,UAAU,sCACXF,EAAAA,cAAA,OAAKE,UAAU,8CAA8CU,GAAG,aAC5DZ,EAAAA,cAAA,OAAKE,UAAU,iBACXF,EAAAA,cAAA,MAAIE,UAAU,gBACTtC,EAAM+B,OAAOkB,KAAI,CAACC,EAAOP,KACtB,IAAIQ,EAAyB,IAAVR,EAAc,aAAe,GAChD,MAAMS,EAAgBpD,EAAM+B,OAAOY,GAAOV,KAC1C,OACIG,EAAAA,cAAA,MAAIE,UAAY,8BAA6Ba,IAAgBE,IAAKV,GAC9DP,EAAAA,cAAA,OAAKE,UAAU,yDAAyDe,IAAKV,GACzEP,EAAAA,cAAA,KACI,WAAUc,EAAMf,IAChBI,KAAK,IACLC,SAAS,MACTF,UAAU,gBACVO,IAAI,WACJJ,QAAUC,IACNA,EAAEE,iBAhFhCD,KACtB,GAAK/B,EAWDV,GAAYD,GACZI,EAAesC,GACfpC,EAAkBoC,OAbP,CACXpC,EAAkBoC,GAClB,MAAMW,EAAUrC,SAASsC,cAAc,4BACnCD,GACAA,EAAQE,UAAUC,OAAO,cAE7B,MAAMC,EAAWzC,SAAS0C,eAAe,oBAAsBhB,EAAQ,IACnEe,GACAA,EAASF,UAAUI,IAAI,aAE/B,CAIA,EAkEoDC,CAAiBlB,EAAM,EAE3BG,wBAAyB,CACrBC,OAAQK,MAInB,SAQjChB,EAAAA,cAAC0B,IAAU,CACP7D,QAASA,EACTG,YAAaA,EACb2D,uBAAuB,EACvBC,QAAShE,EAAM+B,OAAOkB,KAAI,CAACgB,EAAOtB,IAAWP,EAAAA,cAAA,OAAKD,IAAK8B,EAAM9B,IAAKkB,IAAKV,QAIvF,CAEI,OAAQP,EAAAA,cAACC,EAAAA,SAAQ,KACrB,C","sources":["webpack:///./Scripts/ComponentsBevego/LightboxImages.js"],"sourcesContent":["import React, { Fragment, useEffect, useState } from 'react';\nimport 'react-responsive-carousel/lib/styles/carousel.min.css';\nimport FsLightbox from 'fslightbox-react';\nimport Splide from '@splidejs/splide';\n\nconst loadHorizontalSlider = (isMobile, isTablet) => {\n    const splideElPdp = document.querySelectorAll('.product-detail__thumbnails .splide');\n    if (splideElPdp.length > 0) {\n        new Splide('.product-detail__thumbnails .splide',\n            {\n                direction: 'ltr',\n                height: isMobile ? '200px' : '130px',\n                width: isMobile ? '100%' : '90%',\n                perPage: isMobile ? 1 : isTablet ? 2 : 3,\n                perMove: 1,\n                gap: '10px',\n                rewind: true,\n                type: 'slide',\n            }).mount();\n\n    }\n}\n\nconst LightboxImages = (props) => {\n    const [toggler, setToggler] = useState(false);\n    const [sourceIndex, setSourceIndex] = useState(0);\n    const [mainImageIndex, setMainImageIndex] = useState(0);\n    const [width, setWidth] = useState(window.innerWidth);\n    const isMobile = width <= 648;\n    const isTablet = width >= 648 && width <= 1024;\n\n    const onClickThumbnail = (index) => {\n        if (!isMobile) {\n            setMainImageIndex(index);\n            const imageEl = document.querySelector(\".splide-image.is-clicked\");\n            if (imageEl) {\n                imageEl.classList.remove(\"is-clicked\");\n            }\n            const targetEl = document.getElementById(\"splidePdp-slide0\" + (index + 1))\n            if (targetEl) {\n                targetEl.classList.add(\"is-clicked\");\n            }\n        } else {\n            setToggler(!toggler);\n            setSourceIndex(index);\n            setMainImageIndex(index);\n        }\n    };\n\n    const onClickMain = (index) => {\n        setToggler(!toggler);\n        setSourceIndex(index);\n        setMainImageIndex(index);\n    };\n\n    const handleWindowSizeChange = () => {\n        setWidth(window.innerWidth);\n    }\n\n    useEffect(() => {\n        loadHorizontalSlider(isMobile, isTablet);\n    }, [isMobile, isTablet]);\n\n    useEffect(() => {\n        window.addEventListener('resize', handleWindowSizeChange);\n        return () => {\n            window.removeEventListener('resize', handleWindowSizeChange);\n        }\n    }, []);\n\n    if (props.images && props.images.length > 0) {\n        const mainImageHtml = props.images[mainImageIndex].html;\n        const mainImageLink = props.images[mainImageIndex].src;\n        return (\n            <Fragment>\n                <div className=\"row product-images\">\n                    <div className=\"small-12 columns hide-for-small-only\">\n                        <figure className={`product-detail__image-container main`}>\n                            <a\n                                data-src={mainImageLink}\n                                href=\"#\"\n                                itemProp=\"url\"\n                                onClick={(e) => {\n                                    e.preventDefault();\n                                    onClickMain(mainImageIndex);\n                                }}\n                                className=\"product-image\"\n                                rel=\"nofollow\"\n                                dangerouslySetInnerHTML={{\n                                    __html: mainImageHtml,\n                                }}\n                            ></a>\n                        </figure>\n                    </div>\n                    <div className=\"columns product-detail__thumbnails\">\n                        <div className=\"product-detail__thumbnails-container splide\" id=\"splidePdp\">\n                            <div className=\"splide__track\">\n                                <ul className=\"splide__list\">\n                                    {props.images.map((image, index) => {\n                                        let isFirstIndex = index === 0 ? \"is-clicked\" : \"\";\n                                        const thumbnailHtml = props.images[index].html;\n                                        return (\n                                            <li className={`splide__slide splide-image ${isFirstIndex}`} key={index}>\n                                                <div className=\"product-detail__image-container thumb columns small-12\" key={index}>\n                                                    <a\n                                                        data-src={image.src}\n                                                        href=\"#\"\n                                                        itemProp=\"url\"\n                                                        className=\"product-image\"\n                                                        rel=\"nofollow\"\n                                                        onClick={(e) => {\n                                                            e.preventDefault();\n                                                            onClickThumbnail(index);\n                                                        }}\n                                                        dangerouslySetInnerHTML={{\n                                                            __html: thumbnailHtml\n                                                        }}\n                                                    ></a>\n                                                </div>\n                                            </li>\n                                        )\n                                    })}\n                                </ul>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <FsLightbox\n                    toggler={toggler}\n                    sourceIndex={sourceIndex}\n                    loadOnlyCurrentSource={true}\n                    sources={props.images.map((value, index) => (<img src={value.src} key={index} />))}\n                />\n            </Fragment>\n        );\n    }\n    else {\n        return (<Fragment />);\n    }\n};\n\nexport default LightboxImages;\n"],"names":["props","toggler","setToggler","useState","sourceIndex","setSourceIndex","mainImageIndex","setMainImageIndex","width","setWidth","window","innerWidth","isMobile","isTablet","handleWindowSizeChange","useEffect","loadHorizontalSlider","document","querySelectorAll","length","Splide","direction","height","perPage","perMove","gap","rewind","type","mount","addEventListener","removeEventListener","images","mainImageHtml","html","mainImageLink","src","React","Fragment","className","href","itemProp","onClick","e","index","preventDefault","rel","dangerouslySetInnerHTML","__html","id","map","image","isFirstIndex","thumbnailHtml","key","imageEl","querySelector","classList","remove","targetEl","getElementById","add","onClickThumbnail","FsLightbox","loadOnlyCurrentSource","sources","value"],"sourceRoot":""}