import React, { useEffect, useMemo, useRef } from "react";
import Glider from "react-glider";
// import Slide from "./Slide";

interface PhotosCarouselProps {
  children: React.ReactNode;
  onSlideChange?: (slide: number) => void;
  initialSlideIdx?: number;
  currentSlideIdx?: number;
  className?: string;
  config?: {
    duration?: number | undefined;
    slidesToShow?: number | undefined;
    slidesToScroll?: number | undefined;
    scrollLock?: boolean | undefined;
    itemWidth?: number | undefined;
  };
  style?: React.CSSProperties;
}

const defaultConfig: {
  duration: number;
  slidesToShow: number;
  slidesToScroll: number;
  scrollLock: boolean;
  itemWidth: number | undefined;
} = {
  duration: 0.75,
  slidesToShow: 1,
  slidesToScroll: 1,
  scrollLock: true,
  itemWidth: undefined,
};

const PhotosCarousel: React.FC<PhotosCarouselProps> = ({
  children,
  onSlideChange = () => null,
  initialSlideIdx = 1,
  currentSlideIdx,
  className = "",
  config: customConfig = {},
  style,
}) => {
  const carouselRef = useRef<any>(null);

  const config = useMemo(() => {
    return { ...defaultConfig, ...customConfig };
  }, [customConfig]);

  useEffect(() => {
    const glider = carouselRef.current;
    if (glider && glider.slide !== currentSlideIdx) {
      glider.scrollItem(currentSlideIdx);
    }
  }, [currentSlideIdx]);

  const slides = React.Children.map(children, (item) => (
    <div key={(item as React.ReactElement).key}>{item}</div>
  ));

  return (
    <div className={className} style={style}>
      <Glider
        ref={carouselRef}
        draggable
        hasArrows
        slidesToShow={config.slidesToShow}
        slidesToScroll={config.slidesToScroll}
        duration={config.duration}
        scrollLock={config.scrollLock}
        itemWidth={config.itemWidth}
        onSlideVisible={(context) => onSlideChange(context.detail.slide)}
        scrollToSlide={initialSlideIdx}
      >
        {slides}
      </Glider>
    </div>
  );
};

export default PhotosCarousel;