import React from 'react';
import { Dimensions, TouchableOpacity, Image, View } from 'react-native';
import Carousel from 'react-native-reanimated-carousel';
import PaginationDot from 'react-native-animated-pagination-dot';
import { Colors } from 'src/theme';
import { styles } from './styles';
import { interpolate } from 'react-native-reanimated';
import { PhotosData } from '../types';

const { width } = Dimensions.get('window');

const ImageCarousel = ({
  photos,
  activeIndex,
  setActiveIndex,
  openModal,
  containerStyles
}: {
  photos: PhotosData[];
  activeIndex: number;
  setActiveIndex: (index: number) => void;
  openModal: (index: number) => void;
  containerStyles?: any;
}) => {
  const animationStyle = React.useCallback((value: number) => {
    'worklet';

    const zIndex = interpolate(value, [-1, 0, 1], [10, 20, 30]);
    const translateX = interpolate(value, [-2, 0, 1], [-width, 0, width]);

    return {
      transform: [{ translateX }],
      zIndex
    };
  }, []);

  return (
    <>
      <Carousel
        width={width}
        height={220}
        data={photos}
        renderItem={({ item, index }) => (
          <TouchableOpacity key={index} onPress={() => openModal(index)} activeOpacity={1}>
            <Image source={{ uri: item.uriSmall }} style={styles.image} />
          </TouchableOpacity>
        )}
        customAnimation={animationStyle}
        onSnapToItem={setActiveIndex}
        vertical={false}
        defaultIndex={activeIndex}
        loop={false}
      />

      <View style={[styles.pagination, containerStyles && containerStyles]}>
        <PaginationDot
          activeDotColor={Colors.DARK_BLUE}
          inactiveDotColor={'rgba(15, 63, 79, 0.5)'}
          curPage={activeIndex}
          maxPage={photos.length}
          sizeRatio={1}
        />
      </View>
    </>
  );
};

export default ImageCarousel;
