import { ComponentType, ReactNode, SVGProps } from 'react';

import { Styles } from '@cleartrip/ct-design-types';

export type TCarouselAnimationValue = {
  value: number;
};

export type TParallaxRenderItemInfo<T> = {
  item: T;
  index: number;
  animationValue: TCarouselAnimationValue;
};

export type TParallaxSliderStyleConfig = {
  root?: Styles[];
  selectedDots?: Styles[];
  carouselDots?: Styles[];
  dotsContainer?: Styles[];
  imageCountChipContainer?: Styles[];
};

export interface IParallaxSliderProps<T> {
  data: T[];
  slideWidth: number;
  wrapperHeight: number;
  renderItem: (info: TParallaxRenderItemInfo<T>) => ReactNode;
  startIndex?: number;
  showDots?: boolean;
  maxDotsToShow?: number;
  styleConfig?: TParallaxSliderStyleConfig;
  customIcon?: ComponentType<SVGProps<SVGSVGElement>>;
  customIconIndex?: number;
  onSlide?: (index: number) => void;
  /**
   * Identifier used to locate this component in end-to-end tests.
   * Forwarded to the carousel wrapper view.
   */
  testID?: string;
}

export interface ISlideImageProps {
  animationValue: TCarouselAnimationValue;
  slideWidth: number;
  children: ReactNode;
  /**
   * Identifier used to locate this slide in end-to-end tests.
   * Forwarded to the outer clip view.
   */
  testID?: string;
}

export interface IPaginationProps {
  slideCount: number;
  currentSlideIndex: number;
  maxDotsToShow: number;
  showDots?: boolean;
  styleConfig?: TParallaxSliderStyleConfig;
  customIcon?: ComponentType<SVGProps<SVGSVGElement>>;
  customIconIndex?: number;
}