/**
 * Horizontal image carousel with parallax and dot pagination.
 *
 * @example
 * <ParallaxSlider
 *   data={images}
 *   slideWidth={320}
 *   wrapperHeight={200}
 *   renderItem={({ item, animationValue }) => (
 *     <SlideImage animationValue={animationValue} slideWidth={320}>
 *       <Image source={{ uri: item.url }} />
 *     </SlideImage>
 *   )}
 * />
 */
import { memo, useCallback, useState, type ReactElement } from 'react';

import { Container } from '@cleartrip/ct-design-container';
import { useStyles } from '@cleartrip/ct-design-style-manager';
import RNACarousel from 'react-native-reanimated-carousel';

import Pagination from './Pagination';
import { PARALLAX_WINDOW_SIZE } from './constants';
import { useEdgePanGesture } from './hooks/useEdgePanGesture';
import { useParallaxSliderCarouselState } from './hooks/useParallaxSliderCarouselState';
import { staticStyles } from './style';
import { IParallaxSliderProps, TParallaxRenderItemInfo } from './type';

const ParallaxSliderInner = <T,>({
  data,
  slideWidth,
  wrapperHeight,
  renderItem,
  startIndex = 0,
  showDots = true,
  maxDotsToShow = data.length,
  styleConfig,
  customIcon,
  customIconIndex,
  onSlide,
  testID,
}: IParallaxSliderProps<T>) => {
  const [currentIndex, setCurrentIndex] = useState(startIndex);
  const { activeIndex, touchStartX } = useParallaxSliderCarouselState(startIndex);
  const maxIndex = data.length - 1;

  const { root: rootStyles = [] } = styleConfig || {};

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

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

  // animationValue is driven by the carousel (0 = centered, ±1 = mid-swipe to next/prev slide)
  const handleConfigurePanGesture = useEdgePanGesture({ activeIndex, maxIndex, touchStartX });

  const renderCarouselItem = useCallback(
    (renderInfo: TParallaxRenderItemInfo<T>) => (
      <Container styleConfig={{ root: [staticStyles.slide, dynamicStyles.clip] }}>{renderItem(renderInfo)}</Container>
    ),
    [dynamicStyles.clip, renderItem],
  );

  return (
    <>
      <Pagination
        slideCount={data.length}
        showDots={showDots}
        customIcon={customIcon}
        customIconIndex={customIconIndex}
        maxDotsToShow={maxDotsToShow}
        styleConfig={styleConfig}
        currentSlideIndex={currentIndex}
      />
      <Container
        testID={testID ? `${testID}-ParallaxSlider` : undefined}
        styleConfig={{ root: [staticStyles.root, dynamicStyles.clip, ...rootStyles] }}
      >
        <RNACarousel
          width={slideWidth}
          height={wrapperHeight}
          data={data}
          defaultIndex={startIndex}
          loop={false}
          enabled
          snapEnabled
          overscrollEnabled={false}
          windowSize={PARALLAX_WINDOW_SIZE}
          containerStyle={dynamicStyles.clip}
          style={dynamicStyles.clip}
          onSnapToItem={handleSnapToItem}
          onConfigurePanGesture={handleConfigurePanGesture}
          renderItem={renderCarouselItem}
        />
      </Container>
    </>
  );
};

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

export default ParallaxSlider;