1import { useState } from 'react'
2import { isIE } from 'react-device-detect'
3
4import Carousel from 'nuka-carousel'
5import CaseSlide from './case-study-slide'
6import Image from '@hashicorp/react-image'
7import InlineSvg from '@hashicorp/react-inline-svg'
8import ActiveControlDot from './img/active-control-dot.svg?include'
9import InactiveControlDot from './img/inactive-control-dot.svg?include'
10import LeftArrow from './img/left-arrow-control.svg?include'
11import RightArrow from './img/right-arrow-control.svg?include'
12
13export default function CaseStudyCarousel({
14  caseStudies,
15  title,
16  logoSection = { grayBackground: false, featuredLogos: [] },
17}) {
18  const [slideIndex, setSlideIndex] = useState(0)
19  const { grayBackground, featuredLogos } = logoSection
20
21  const caseStudySlides = caseStudies.map((caseStudy) => (
22    <CaseSlide key={caseStudy.quote} caseStudy={caseStudy} />
23  ))
24  const logoRows = featuredLogos && Math.ceil(featuredLogos.length / 3)
25
26  function renderControls() {
27    return (
28      <div className="carousel-controls">
29        {caseStudies.map((caseStudy, stableIdx) => {
30          return (
31            <button
32              key={caseStudy.quote}
33              className="carousel-controls-button"
34              onClick={() => setSlideIndex(stableIdx)}
35            >
36              <InlineSvg
37                src={
38                  slideIndex === stableIdx
39                    ? ActiveControlDot
40                    : InactiveControlDot
41                }
42              />
43            </button>
44          )
45        })}
46      </div>
47    )
48  }
49
50  function sideControls(icon, direction) {
51    return (
52      <button className="side-control" onClick={direction}>
53        <InlineSvg src={icon} />
54      </button>
55    )
56  }
57
58  return (
59    <section
60      className={`g-case-carousel ${grayBackground ? 'has-background' : ''}`}
61      style={{ '--background-height': `${300 + logoRows * 100}px` }}
62    >
63      <h2 className="g-type-display-2">{title}</h2>
64      {!isIE ? (
65        <Carousel
66          cellAlign="left"
67          wrapAround={true}
68          heightMode="current"
69          slideIndex={slideIndex}
70          slidesToShow={1}
71          autoGenerateStyleTag
72          renderBottomCenterControls={() => renderControls()}
73          renderCenterLeftControls={({ previousSlide }) => {
74            return sideControls(LeftArrow, previousSlide)
75          }}
76          renderCenterRightControls={({ nextSlide }) => {
77            return sideControls(RightArrow, nextSlide)
78          }}
79          afterSlide={(slideIndex) => setSlideIndex(slideIndex)}
80        >
81          {caseStudySlides}
82        </Carousel>
83      ) : null}
84      <div className="background-section">
85        {featuredLogos && featuredLogos.length > 0 && (
86          <div className="mono-logos">
87            {featuredLogos.map((featuredLogo) => (
88              <Image
89                key={featuredLogo.url}
90                url={featuredLogo.url}
91                alt={featuredLogo.companyName}
92              />
93            ))}
94          </div>
95        )}
96      </div>
97    </section>
98  )
99}
100