{"ast":null,"code":"import { jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport cn from 'classnames';\nimport { Arrow } from 'components/gui/Arrow';\nimport Button from 'components/gui/Button';\nimport CircleButton from 'components/gui/CircleButton';\nimport CustomBlockContent from 'components/gui/CustomBlockContent';\nimport SlideshowInline from 'components/slideshowInline/SlideshowInline';\nimport Strip from 'components/strips/Strip';\nimport { useClientWidth } from 'hooks/useClientSize';\nimport { useIsDesktop } from 'hooks/useIsDevice';\nimport HTMLReactParser from 'html-react-parser';\nimport { imageBuilder } from 'lib/api';\nimport { useEffect, useRef, useState } from 'react';\nimport SliceIntro from 'slices/SliceIntro/SliceIntro';\nimport styles from './TextImageSlice.module.scss'; // Desktop\n\nconst ListItem = ({\n  data,\n  id,\n  nextId,\n  contentPosition\n}) => {\n  const backgroundImageURL = data.image && imageBuilder.image(data.image.asset).width(1280).url();\n  const backgroundColor = data.color && data.color.hex;\n  return /*#__PURE__*/_jsx(\"div\", {\n    id: id,\n    className: cn(styles.listItem),\n    style: {\n      backgroundImage: backgroundImageURL ? `url(${backgroundImageURL})` : undefined,\n      backgroundColor: backgroundColor ? backgroundColor : undefined\n    },\n    children: /*#__PURE__*/_jsx(Strip, {\n      className: cn(styles.listStrip),\n      style: {\n        marginLeft: contentPosition * 25 + '%'\n      },\n      title: data.title,\n      intro: data.subtitle,\n      blocks: data.text,\n      button: {\n        label: data.button\n      },\n      downHref: nextId && '#' + nextId\n    })\n  });\n};\n\nconst List = ({\n  slides\n}) => {\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: slides && slides.map((slide, i) => {\n      const isLast = i == slides.length - 1;\n      return /*#__PURE__*/_jsx(ListItem, {\n        data: slide,\n        contentPosition: i % 2 ? 2 : 1,\n        id: 'intro-' + (i + 1),\n        nextId: isLast ? undefined : 'intro-' + (i + 2)\n      }, slide._key);\n    })\n  });\n}; // Mobile\n\n\nconst SlideItem = ({\n  data,\n  className,\n  number\n}) => {\n  const {\n    0: open,\n    1: setOpen\n  } = useState(false);\n  const {\n    0: showFullText,\n    1: setShowFullText\n  } = useState(false);\n  const imageRef = useRef();\n  const textsRef = useRef();\n  const imageURL = data.image && imageBuilder.image(data.image.asset).width(400).url();\n\n  const openClose = () => {\n    const newOpen = !open;\n    setOpen(newOpen); // textsRef.current.style.overflowY = newOpen ? 'auto' : 'hidden'\n\n    textsRef.current.scrollTo({\n      top: 0,\n      behavior: 'smooth'\n    }); // if(newOpen) {\n    //    setShowFullText(newOpen)\n    // }\n    // else {\n    //    setTimeout(() => {\n    //       setShowFullText(newOpen)\n    //    }, 800);\n    // }\n    // return;\n    // const newOpen = !open\n    // const containerWidth = textsRef.current.parentNode.clientWidth\n    // const containerHeight = textsRef.current.parentNode.clientHeight\n    // const tl = gsap.timeline()\n    // textsRef.current.style.overflowY = newOpen ? 'auto' : 'hidden'\n    // tl.to(textsRef.current, {\n    //    duration: 0.66,\n    //    ease: 'power3.inOut',\n    //    y: newOpen ? -imageRef.current.clientHeight : 0,\n    //    height: newOpen\n    //       ? containerHeight + 'px'\n    //       : containerHeight * 0.5 + 'px',\n    //    //scale: newOpen ? 1.05 + ((containerWidth - textsRef.current.clientWidth) / containerWidth) : 1,\n    // })\n    // setOpen(newOpen)\n  }; // console.log('TextImageSlice.js::94 data.text', data.text)\n  // const floatRef = useRef()\n  // const textBlockRef = useRef()\n  // const textBlockReplacerRef = useRef()\n  // const [resizeComplete, setResizeComplete] = useState(false)\n  // const [innerBlockHtml, setInnerBlockHtml] = useState()\n  // useEffect(() => {\n  //    if(resizeComplete) return;\n  //    // TODO\n  //    // PROBABLY DOESNT WORK if children > 1\n  //    if ((textBlockRef.current || textBlockReplacerRef.current) && textsRef.current && floatRef.current) {\n  //       const textBlockRefCurrent = textBlockReplacerRef.current || textBlockRef.current\n  //       const lastChild = textBlockRefCurrent.children[textBlockRefCurrent.children.length - 1]\n  //       const availableSpace = textsRef.current.offsetHeight\n  //          - floatRef.current.offsetHeight\n  //          - textBlockRefCurrent.offsetTop\n  //       const newHTML = lastChild.innerHTML.split(' ').slice(0, -1).join(' ')\n  //       if (newHTML != '' && textBlockRefCurrent.offsetHeight > availableSpace)\n  //          setInnerBlockHtml(newHTML)\n  //       else {\n  //          setInnerBlockHtml(newHTML.split(' ').slice(0, -1).join(' ') + ('…'))\n  //          setResizeComplete(true)\n  //       }\n  //    }\n  // }, [innerBlockHtml])\n\n\n  return /*#__PURE__*/_jsxs(\"li\", {\n    className: cn(className, styles.slideshowItem, open && styles.isOpened),\n    children: [/*#__PURE__*/_jsx(\"div\", {\n      ref: imageRef,\n      className: cn(styles.slideshowImage, open && styles.isOpened),\n      children: imageURL && /*#__PURE__*/_jsx(\"img\", {\n        src: imageURL\n      })\n    }), /*#__PURE__*/_jsxs(\"div\", {\n      ref: textsRef,\n      className: cn(styles.slideshowTexts, open && styles.isOpened),\n      children: [/*#__PURE__*/_jsx(\"span\", {\n        className: cn('p--m', styles.slideNumber),\n        children: number\n      }), /*#__PURE__*/_jsx(\"h2\", {\n        className: cn('h--2', styles.title),\n        children: data.title\n      }), data.subtitle && /*#__PURE__*/_jsx(\"p\", {\n        className: cn('p--m', styles.intro),\n        children: data.subtitle\n      }), data.text && /*#__PURE__*/_jsx(CustomBlockContent, {\n        className: cn('p--m', styles.text),\n        blocks: data.text\n      })]\n    }), /*#__PURE__*/_jsx(\"div\", {\n      className: styles.floatCont,\n      children: /*#__PURE__*/_jsx(CircleButton, {\n        className: cn(styles.openCloseButton),\n        icon: open ? 'minus' : 'plus',\n        color: \"white\",\n        onClick: openClose\n      })\n    })]\n  });\n};\n\nconst Slideshow = ({\n  slides\n}) => {\n  return /*#__PURE__*/_jsx(SlideshowInline, {\n    items: slides,\n    renderItem: (item, itemStyle, i) => /*#__PURE__*/_jsx(SlideItem, {\n      data: item,\n      className: itemStyle,\n      number: `${i + 1}/${slides.length}`\n    }, item._key)\n  });\n};\n\nconst TextImageSlice = ({\n  slides,\n  id\n}) => {\n  const introText = slides && slides.length && slides[0].intro;\n  const isDesktop = useIsDesktop();\n  return /*#__PURE__*/_jsxs(\"section\", {\n    id: id,\n    className: cn(styles.slideShowSlice),\n    children: [/*#__PURE__*/_jsx(SliceIntro, {\n      text: introText\n    }), isDesktop ? /*#__PURE__*/_jsx(List, {\n      slides: slides\n    }) : /*#__PURE__*/_jsx(Slideshow, {\n      slides: slides\n    })]\n  });\n};\n\nexport default TextImageSlice;","map":null,"metadata":{},"sourceType":"module"}