import { AnyFunction, StylesOf } from '@codeleap/types'
import Animated, { useAnimatedStyle } from 'react-native-reanimated'
import { Touchable } from '../Touchable'
import { View } from '../View'
import { DotComposition } from './styles'

export type PagerDot = {
  onPress: AnyFunction
  isActive: boolean
  index: number
  styles: StylesOf<DotComposition>
}

function Dot({ onPress, isActive, index, styles }: PagerDot) {
  /** `isActive` is a plain boolean captured by the worklet closure — this is safe because the Dot remounts when `currentPage` changes (keyed list), so the closure is never stale. If Dot were memoized across page changes this would need a SharedValue instead. */
  const animation = useAnimatedStyle(() => {
    const scale = isActive ? 1 : 0.6
    return {
      transform: [{ scale }],
      ...(isActive ? styles['dot:active'] : styles.dot),
    }
  })

  return (
    <Touchable
      debugName={`default-pager-dot-touchable-${index}`}
      onPress={onPress}
      noFeedback
      style={[styles.touchable, isActive && styles['touchable:active']]}
    >
      <Animated.View style={[animation, styles.dot]} />
    </Touchable>
  )
}

export type PagerDots = {
  styles: StylesOf<DotComposition>
  currentPage: number
  setCurrentPage: (page: number) => void
  pages: Array<any>
}

export function PagerDots({ styles, currentPage, setCurrentPage, pages }: PagerDots) {
  return (
    <View style={styles.wrapper}>
      {pages?.map((_, i) => (
        <Dot
          key={`default-pager-dots-index-${i}`}
          index={i}
          onPress={() => setCurrentPage(i)}
          isActive={i === currentPage}
          styles={styles}
        />
      ))}
    </View>
  )
}