/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./index.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Box } from '@atlaskit/primitives/compiled';
import CarouselSlide from './CarouselSlide';
const styles = {
  carousel: "_1reo15vq _18m915vq _1e0c1txw _1bsb1osq _4t3i1osq _kqswh2mm"
};

// Slide enters from the right: translates from 40px right + fades in
const slideInFromRight = null;
const slideWrapperMap = {
  static: "_1bsb1osq _4t3i1osq",
  animated: "_1bsb1osq _4t3i1osq _j7hql61g _5sagjx92 _1pglafbj _1o511hrf _bl8aglyw _2hwzhgkh"
};
/**
 * Derives layout size bucket from pixel dimensions.
 * Used instead of CSS @container queries (which are blocked by the linter)
 * to control which elements are shown at different card sizes.
 */
const getSize = (width, height) => {
  if (width < 200 || height < 100) {
    return 'minimal';
  }
  if (width < 400 || height < 140) {
    return 'compact';
  }
  return 'full';
};
const Carousel = ({
  icon,
  iconLabel,
  items,
  onPrimaryButtonClick,
  primaryButtonLabel,
  testId = 'embed-card-teaser-carousel'
}) => {
  const [activeIndex, setActiveIndex] = useState(0);
  const [size, setSize] = useState('full');

  // Tracks whether the user has navigated at least once.
  // The first slide is rendered statically (no animation) to avoid any
  // CSS animation running during SSR or on the initial paint.
  const hasNavigated = useRef(false);
  const containerRef = useRef(null);

  // Observe the carousel container's size and update the layout bucket.
  useEffect(() => {
    const el = containerRef.current;
    if (!el) {
      return;
    }
    const observer = new ResizeObserver(([entry]) => {
      const {
        width,
        height
      } = entry.contentRect;
      setSize(getSize(width, height));
    });
    observer.observe(el);
    return () => observer.disconnect();
  }, []);
  const goNext = useCallback(() => {
    hasNavigated.current = true;
    setActiveIndex(current => (current + 1) % items.length);
  }, [items.length]);
  const goTo = useCallback(index => {
    if (index === activeIndex) {
      return;
    }
    hasNavigated.current = true;
    setActiveIndex(index);
  }, [activeIndex]);
  const currentSlide = items[activeIndex];
  const isLastSlide = activeIndex === items.length - 1;
  return /*#__PURE__*/React.createElement(Box, {
    ref: containerRef,
    xcss: styles.carousel,
    testId: testId
  }, /*#__PURE__*/React.createElement(Box, {
    key: activeIndex,
    xcss: slideWrapperMap[hasNavigated.current ? 'animated' : 'static'],
    "aria-live": "polite"
  }, /*#__PURE__*/React.createElement(CarouselSlide, {
    primaryButtonLabel: primaryButtonLabel,
    description: currentSlide.description,
    icon: icon,
    iconLabel: iconLabel,
    image: currentSlide.image,
    title: currentSlide.title,
    onPrimaryButtonClick: onPrimaryButtonClick,
    onDotClick: goTo,
    onNextClick: !isLastSlide ? goNext : undefined,
    size: size,
    slideIndex: activeIndex,
    testId: `${testId}-slide`,
    totalSlides: items.length
  })));
};
export default Carousel;