/**
 * Web stub — renders the active slide without parallax / gesture-driven carousel.
 * Full parallax behavior is available on React Native via ParallaxSlider.native.
 */
import { memo, useCallback, useState, type ReactElement } from 'react';

import { Container } from '@cleartrip/ct-design-container';
import { useStyles } from '@cleartrip/ct-design-style-manager';

import Pagination from './Pagination';
import { staticStyles } from './style';
import { IParallaxSliderProps } from './type';

const IDLE_ANIMATION_VALUE = { value: 0 };

const ParallaxSliderInner = <T,>({
  data,
  slideWidth,
  wrapperHeight,
  renderItem,
  startIndex = 0,
  showDots = true,
  maxDotsToShow = data.length,
  styleConfig,
  customIcon,
  customIconIndex,
  onSlide,
}: IParallaxSliderProps<T>) => {
  const [currentIndex, setCurrentIndex] = useState(startIndex);
  const { root: rootStyles = [] } = styleConfig || {};
  const activeItem = data[currentIndex];

  const dynamicStyles = useStyles(
    () => ({
      clip: {
        width: slideWidth,
        height: wrapperHeight,
        overflow: 'hidden',
      },
    }),
    [slideWidth, wrapperHeight],
  );

  const handleSelectSlide = useCallback(
    (index: number) => {
      setCurrentIndex(index);
      onSlide?.(index);
    },
    [onSlide],
  );

  return (
    <>
      <Pagination
        slideCount={data.length}
        showDots={showDots}
        customIcon={customIcon}
        customIconIndex={customIconIndex}
        maxDotsToShow={maxDotsToShow}
        styleConfig={styleConfig}
        currentSlideIndex={currentIndex}
      />
      <Container
        styleConfig={{ root: [staticStyles.root, dynamicStyles.clip, ...rootStyles] }}
        onClick={() => handleSelectSlide((currentIndex + 1) % Math.max(data.length, 1))}
      >
        {activeItem !== undefined
          ? renderItem({ item: activeItem, index: currentIndex, animationValue: IDLE_ANIMATION_VALUE })
          : null}
      </Container>
    </>
  );
};

const ParallaxSlider = memo(ParallaxSliderInner) as <T>(props: IParallaxSliderProps<T>) => ReactElement | null;

export default ParallaxSlider;