import * as React from 'react';
import { useContext, CSSProperties } from 'react';
import { StoreContext } from '../../../services/store';
import { IMedia } from '../../../types';
import UniformCarousel from './UniformCarousel';
import SpotlightCarousel from './SpotlightCarousel';
import BuyBoxCarousel from './BuyBoxCarousel';
import MobileCarousel from './MobileCarousel';
import { resolveCarouselType } from '../../../utils/carousel';

interface Props<T> {
  items: T[];
  style?: CSSProperties;
  onPostChange: (post: IMedia | null) => void;
}

// Maximum number of visible elements for mobile carousels
const MAX_MOBILE_CAROUSEL_ELEMS = 3;

const Carousel = (props: Props<JSX.Element>) => {
  const {
    data: { settings },
    isMobile,
  } = useContext(StoreContext);

  // Default mobile count is 1 but can be overridden in settings (capped below)
  const mobileCarouselNbElems = settings.mobile_carousel_content_size || 1;
  const nbElems = isMobile
    ? Math.min(mobileCarouselNbElems, MAX_MOBILE_CAROUSEL_ELEMS)
    : settings.content_size;

  const carouselType = resolveCarouselType(settings);

  // Use MobileCarousel for mobile views
  if (isMobile) {
    return <MobileCarousel {...props} nbElems={nbElems} />;
  }

  // BuyBoxCarousel: compact desktop-only carousel with overlaid arrows
  if (carouselType === 'buy_box') {
    return <BuyBoxCarousel {...props} nbElems={nbElems} />;
  }

  // Use SpotlightCarousel for desktop if configured
  if (carouselType === 'spotlight') {
    return <SpotlightCarousel {...props} contentSize={nbElems} />;
  }

  return <UniformCarousel {...props} nbElems={nbElems} />;
};

export default Carousel;