import React, { ReactNode } from 'react'
import { StyledProp } from '@codeleap/styles'
import { PagerComposition } from './styles'
import { TCarouselProps } from 'react-native-reanimated-carousel'
import { CarouselRenderItemInfo } from 'react-native-reanimated-carousel/lib/typescript/types'

/**
 * `animationValue` inherited from `CarouselRenderItemInfo` is a UI-thread SharedValue — consuming it requires `useAnimatedStyle` or a worklet; reading it in plain JS will always return the initial value.
 */
export type PageProps<T> = CarouselRenderItemInfo<T> & {
  isLast: boolean
  isFirst: boolean
  isOnly: boolean
  index: number
}

/** `removeFixedHeight` / `removeFixedWidth` exist because carousel dimensions must be numeric — pass the pixel height of any sibling UI (tabs, headers) so the carousel does not overflow them. */
export type PagerProps<T> = Partial<Omit<TCarouselProps<T>, 'data' | 'renderItem'>> & {
  pages: TCarouselProps<T>['data']
  renderItem?: (props: PageProps<T>) => React.ReactElement
  page?: number
  onChangePage?: (page: number) => void
  initialPage?: number
  style?: StyledProp<PagerComposition>
  showDots?: boolean
  footer?: ReactNode
  autoCalculateFooterHeight?: boolean
  removeFixedHeight?: number
  removeFixedWidth?: number
}