import { useRef } from "react";
import {
  View,
  Text,
  FlatList,
  Dimensions,
  Animated,
  StyleSheet,
} from "react-native";
import { TravelDetailsTile } from "./travel_details_tile";
import { TravelHistoryActivity } from "../domain/entities/travel_details";

const HORIZONTAL_SPACING = 20;
const VERTICAL_SPACING = 10;
const ITEM_HEIGHT = 200;
const FULL_SIZE = ITEM_HEIGHT + VERTICAL_SPACING;
const ITEM_WIDTH = Dimensions.get("window").width - HORIZONTAL_SPACING * 2;

interface TravelActivityListProps {
  activityList: TravelHistoryActivity[];
}

export const TravelActivityList = ({
  activityList,
}: TravelActivityListProps) => {
  const scrollRef = useRef(new Animated.Value(0)).current;
  return (
    <View style={styles.detailsContainer}>
      <Text style={styles.activitiesText}>Actividades</Text>
      <FlatList
        data={activityList}
        style={{ paddingVertical: VERTICAL_SPACING }}
        ListFooterComponent={<View style={{ height: VERTICAL_SPACING }} />}
        keyExtractor={(item, index) => index.toString()}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: scrollRef } } }],
          { useNativeDriver: false }
        )}
        renderItem={({ item, index }) => {
          const widthRange = [FULL_SIZE * index, FULL_SIZE * (index + 1.5)];
          const width = scrollRef.interpolate({
            inputRange: widthRange,
            outputRange: [ITEM_WIDTH, 0],
            extrapolate: "clamp",
          });
          const opacityRange = [FULL_SIZE * index, FULL_SIZE * (index + 1)];
          const opacity = scrollRef.interpolate({
            inputRange: opacityRange,
            outputRange: [1, 0],
            extrapolate: "clamp",
          });

          return (
            <TravelDetailsTile item={item} width={width} opacity={opacity} />
          );
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  detailsContainer: {
    flex: 7,
  },
  activitiesText: {
    textAlign: "center",
    paddingVertical: 10,
    fontSize: 20,
    fontWeight: "bold",
    borderBottomColor: "gray",
    borderBottomWidth: 1,
    marginHorizontal: 30,
  },
});
