import { View, Text, FlatList, Image, TouchableOpacity } from "react-native";
import React, { useRef } from "react";
import { ItemType, Props } from "./Carousel.types";
import { styles } from "./Carousel.styles";

export default function Carousel(Props: Props) {
  const FlatListRef = useRef<FlatList<any> | null>(null);

  return (
    <View>
      <View style={[styles.mainView, Props.mainView]}>
        <FlatList
          data={Props.data}
          ref={FlatListRef}
          horizontal
          showsHorizontalScrollIndicator={false}
          renderItem={({ item, index }: { item: ItemType; index: number }) => {
            return (
              <View
                key={item.id}
                style={[styles.innerViewStyle, Props.innerViewStyle]}
              >
                <TouchableOpacity
                  style={[styles.componentViewStyle, Props.componentViewStyle]}
                  onPress={item.onPress}
                >
                  <View style={[styles.imageViewStyle, Props.imageViewStyle]}>
                    <Image
                      source={
                        typeof item.image === "string"
                          ? { uri: item.image }
                          : item.image
                      }
                      style={
                        item.roundImage === true
                          ? [styles.roundImageStyle, Props.roundImageStyle]
                          : [styles.imageStyle, Props.imageStyle]
                      }
                    />
                  </View>
                  <View style={[styles.headerViewStyle, Props.headerViewStyle]}>
                    <Text
                      style={[styles.headerTextStyle, Props.headerTextStyle]}
                    >
                      {item.title}
                    </Text>
                  </View>
                  <View style={[styles.detailViewStyle, Props.detailViewStyle]}>
                    <Text
                      style={[styles.detailsTextStyle, Props.detailsTextStyle]}
                    >
                      {item.details}
                    </Text>
                  </View>
                </TouchableOpacity>
              </View>
            );
          }}
        />
      </View>
    </View>
  );
}