{"version":3,"file":"831-586101ba8106b9a7921c.js","mappings":"kOAUA,MAEMA,GAAaC,EAAAA,EAAAA,IAAW,EAAGC,UAASC,UAASC,cAAaC,aAAQ,CACpEC,KAAM,CACFC,MAAO,OACPC,QAAS,QAEbC,MAAO,CAAEF,MAAO,OAAQG,SAAU,QAClCC,QAAS,CAAEC,IAAK,oBAChBC,kBAAmB,CAAEC,SAAU,GAC/BC,iBAAkB,CAAED,SAAU,OAG5BE,EAAeA,CAACC,EAAMC,KAExB,MAAMC,GAAWC,EAAAA,EAAAA,SAAIH,EAAM,WAAY,IACvC,IAAI,IAAII,KAAKF,EAAS,CAClB,GAAGA,EAASE,GAAGC,OAASJ,EAAM,OAAOC,EAASE,GAC1C,CACA,MAAME,EAAYP,EAAaG,EAASE,GAAIH,GAC5C,GAAGK,EAAW,OAAOA,CACzB,CACJ,CAEA,OAAO,CAAK,EAUVC,EAAoBL,IAAaM,EAAAA,EAAAA,UAAIC,IACvC,MAAMC,EAAUX,EAAaU,EAAO,OAEpC,MAAO,CACHA,QACAC,UACAC,YAJgBZ,EAAaU,EAAO,cAKpCG,SAAST,EAAAA,EAAAA,SAAIO,EAAS,yBAAyBP,EAAAA,EAAAA,SAAIO,EAAS,cAAe,KAC9E,GACFR,GA0CH,UAxC4BW,EAAGX,eAC3B,MAAMY,EAAW/B,KACX,EAACgC,EAAa,EAACC,IAAmBC,EAAAA,EAAAA,UAAS,GAC3CC,GAAiBC,EAAAA,EAAAA,WACjBC,GAAsBjB,EAAAA,EAAAA,SAAID,EAAU,uCAAwC,IAElF,OACImB,EAAAA,cAAA,OAAKC,UAAWR,EAASlB,mBACrByB,EAAAA,cAACE,EAAAA,EAAa,CACVC,OAAOhB,EAAAA,EAAAA,UAAKiB,IAAI,CACRH,UAAWI,IAAWZ,EAAStB,OAC/BoB,QAASa,EAAKb,QACdF,QAASe,EAAKf,QACdD,MAAOgB,EAAKhB,MACZE,YAAac,EAAKd,YAClBgB,KAAKxB,EAAAA,EAAAA,SAAIsB,EAAM,sBAAuB,OAC1ClB,EAAiBa,IACrBQ,YAAab,EACbc,QAAS,CACLxC,KAAMyB,EAASzB,KACfyC,QAAShB,EAASiB,gBAClBC,eAAgBlB,EAASmB,uBACzBC,eAAgBR,IAAWZ,EAASqB,WAAY,CAAC,CAACrB,EAASsB,kBAAmBlB,EAAiB,MAC/FmB,eAAgBX,IAAWZ,EAASqB,WAAY,CAAC,CAACrB,EAASsB,kBAAmBlB,EAAiB,OAEnGoB,gBAAiB,CACbC,MAAO,iBACP,aAAc,iBACdjB,UAAWR,EAASpB,SAExB8C,gBAAiB,CACbD,MAAO,aACP,aAAc,aACdjB,UAAWR,EAASpB,WAG1B,C","sources":["webpack://thecoalitionweb/./src/templates/components/advancedGallerySwap.js"],"sourcesContent":["import React, { useState } from 'react'\nimport find from 'lodash/find'\nimport { makeStyles } from '@material-ui/core/styles'\nimport map from 'tcweb-material-components/core/poly/map'\nimport get from 'tcweb-material-components/core/poly/get'\nimport useZoomPercentage from 'tcweb-material-components/core/hooks/useZoomPercentage'\nimport classnames from 'classnames'\n\nimport ImageCarousel from '../../components/common/imageCarousel'\n\nconst BUTTON_HEIGHT = '70px'\n\nconst useClasses = makeStyles(({ palette, spacing, breakpoints, zIndex }) => ({\n    root: {\n        width: '100%',\n        display: 'grid'\n    },\n    image: { width: '100%', maxWidth: '100%' },\n    buttons: { top: `calc(50% - ${BUTTON_HEIGHT})` },\n    carouselContainer: { flexGrow: 1 },\n    rewardsContainer: { flexGrow: 1 }\n}))\n\nconst deepFindType = (elem, type) => {\n    // Recursively look for item\n    const children = get(elem, 'children', [])\n    for(let i in children){\n        if(children[i].name === type) return children[i]\n        else{\n            const foundElem = deepFindType(children[i], type)\n            if(foundElem) return foundElem\n        }\n    }\n\n    return false // Couldn't find it\n}\n\nconst deepFindData = (elem) => {\n    return find(elem.children, (c) => {\n        if(c => !!c.data) return c\n        else { deepFindData(c) }\n    })\n}\n\nconst getCarouselItems = (children) => map(child => {\n    const imgElem = deepFindType(child, 'img')\n    const captionElem = deepFindType(child, 'figcaption')\n    return {\n        child,\n        imgElem,\n        captionElem,\n        imgPath: get(imgElem, 'attribs.data-full-url', get(imgElem, 'attribs.src', '')),\n    }\n}, children)\n\nconst advancedGallerySwap = ({ children }) => {\n    const _classes = useClasses()\n    const [initialIndex, setInitialIndex] = useState(0)\n    const zoomPercentage = useZoomPercentage()\n    const getCarouselElements = get(children, '[0].children[0].children[0].children', [])\n\n    return (\n        <div className={_classes.carouselContainer}>\n            <ImageCarousel\n                items={map((item) => ({\n                        className: classnames(_classes.image),\n                        imgPath: item.imgPath,\n                        imgElem: item.imgElem,\n                        child: item.child,\n                        captionElem: item.captionElem,\n                        alt: get(item, 'imgElem.attribs.alt', '')\n                }), getCarouselItems(getCarouselElements))}\n                initialStep={initialIndex}\n                classes={{\n                    root: _classes.root,\n                    stepper: _classes.carouselStepper,\n                    slideContainer: _classes.carouselSlideContainer,\n                    stepButtonPrev: classnames(_classes.stepButton, {[_classes.stepButtonZoomed]: zoomPercentage > 200}),\n                    stepButtonNext: classnames(_classes.stepButton, {[_classes.stepButtonZoomed]: zoomPercentage > 200})\n                }}\n                backButtonProps={{\n                    title: 'Previous image',\n                    'aria-label': 'Previous image',\n                    className: _classes.buttons\n                }}\n                nextButtonProps={{\n                    title: 'Next image',\n                    'aria-label': 'Next image',\n                    className: _classes.buttons\n                }}\n            />\n        </div>\n    )\n}\n\nexport default advancedGallerySwap"],"names":["useClasses","makeStyles","palette","spacing","breakpoints","zIndex","root","width","display","image","maxWidth","buttons","top","carouselContainer","flexGrow","rewardsContainer","deepFindType","elem","type","children","get","i","name","foundElem","getCarouselItems","map","child","imgElem","captionElem","imgPath","advancedGallerySwap","_classes","initialIndex","setInitialIndex","useState","zoomPercentage","useZoomPercentage","getCarouselElements","React","className","ImageCarousel","items","item","classnames","alt","initialStep","classes","stepper","carouselStepper","slideContainer","carouselSlideContainer","stepButtonPrev","stepButton","stepButtonZoomed","stepButtonNext","backButtonProps","title","nextButtonProps"],"sourceRoot":""}