import Box from '@mui/material/Box';

import { Image } from 'src/components/image';
import {
  Carousel,
  useCarousel,
  CarouselThumb,
  CarouselThumbs,
  CarouselArrowNumberButtons,
} from 'src/components/carousel';

import { IndexLabel } from './elements';

// ----------------------------------------------------------------------

export function CarouselThumbsX({ data }) {
  const carousel = useCarousel({
    thumbs: {
      slidesToShow: 'auto',
    },
  });

  return (
    <div>
      <Box sx={{ mb: 2.5, position: 'relative' }}>
        <Carousel carousel={carousel} sx={{ borderRadius: 2 }}>
          {data.map((item, index) => (
            <Box key={item.id} sx={{ position: 'relative' }}>
              <IndexLabel index={index + 1} />
              <Image
                visibleByDefault
                alt={item.title}
                src={item.coverUrl}
                ratio={{ xs: '4/3', sm: '16/10' }}
              />
            </Box>
          ))}
        </Carousel>

        <CarouselArrowNumberButtons
          {...carousel.arrows}
          options={carousel.options}
          totalSlides={carousel.dots.dotCount}
          selectedIndex={carousel.dots.selectedIndex + 1}
          sx={{ right: 16, bottom: 16, position: 'absolute' }}
        />
      </Box>

      <CarouselThumbs
        ref={carousel.thumbs.thumbsRef}
        options={carousel.options?.thumbs}
        sx={{
          width: { xs: 1, sm: 360 },
        }}
      >
        {data.map((item, index) => (
          <CarouselThumb
            key={item.id}
            index={index}
            src={item.coverUrl}
            selected={index === carousel.thumbs.selectedIndex}
            onClick={() => carousel.thumbs.onClickThumb(index)}
            sx={{
              width: { xs: 48, sm: 64 },
              height: { xs: 48, sm: 64 },
            }}
          />
        ))}
      </CarouselThumbs>
    </div>
  );
}
