import React, { useEffect, useRef, useState } from 'react';
import styled, { keyframes } from 'styled-components';
import SelectArrow from '../Arrow/SelectArrow';

export interface ISimpleImageCarousel {
  images: string[];
  styles?: React.CSSProperties;
  autoCycle?: boolean;
  autoCycleDelay?: number;
  stopAutoCyclingOnInteraction?: boolean;
}

export const SimpleImageCarousel: React.FC<ISimpleImageCarousel> = ({
  images,
  styles,
  autoCycle = false,
  autoCycleDelay = 3000,
  stopAutoCyclingOnInteraction = false,
}) => {
  const [currentImage, setCurrentImage] = useState(0);
  const autoCycleId = useRef<NodeJS.Timeout | null>(null);

  const handleLeftClick = () => {
    setCurrentImage(
      prevImage => (prevImage - 1 + images?.length) % images?.length
    );
    if (stopAutoCyclingOnInteraction && autoCycleId.current) {
      clearInterval(autoCycleId.current);
      autoCycleId.current = null;
    }
  };

  const handleRightClick = () => {
    setCurrentImage(prevImage => (prevImage + 1) % images?.length);
    if (stopAutoCyclingOnInteraction && autoCycleId.current) {
      clearInterval(autoCycleId.current);
      autoCycleId.current = null;
    }
  };

  useEffect(() => {
    if (autoCycle) {
      autoCycleId.current = setInterval(() => {
        setCurrentImage(prevImage => (prevImage + 1) % images?.length);
      }, autoCycleDelay);
    }

    return () => {
      if (autoCycleId.current) {
        clearInterval(autoCycleId.current);
      }
    };
  }, [autoCycle, autoCycleDelay, images?.length]);

  const hasMoreThanOneImage = images?.length > 1;

  return (
    <ImageContainer style={styles}>
      {hasMoreThanOneImage && (
        <CustomLeftArrow direction="left" onPointerDown={handleLeftClick} />
      )}
      {hasMoreThanOneImage && (
        <CustomRightArrow direction="right" onPointerDown={handleRightClick} />
      )}
      <Carousel>
        <FadeInCarouselImg
          key={currentImage}
          src={images?.[currentImage]}
          alt={`Image ${currentImage}`}
        />
      </Carousel>
    </ImageContainer>
  );
};

const ImageContainer = styled.div`
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-right: 0.5rem;
  max-width: 400px;
  position: relative;
  width: 400px;
`;

const CustomLeftArrow = styled(SelectArrow)`
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
`;

const CustomRightArrow = styled(SelectArrow)`
  position: absolute;
  right: -2.5rem;
  top: 50%;
  transform: translateY(-50%);
`;

const Carousel = styled.div`
  display: flex;
`;

const CarouselImg = styled.img`
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  margin: 0 1rem;
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  scroll-snap-align: start;
  margin-right: 3rem;
`;

const fadeIn = keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`;

const FadeInCarouselImg = styled(CarouselImg)`
  animation: ${fadeIn} 0.5s;
`;
