import { View, Text, StyleSheet, FlatList, Image } from "react-native";
import React, { useState, useRef } from "react";

import { getMaxWidth } from "./scaling";
import Colors from "./Colors";
import { PrimaryButton } from "react-native-digitcamera/src/common/ThemedComponents";

export const RCBTipCard = (item) => {
  return (
    <View style={styles.TipCardContainer}>
      <View style={styles.TipCardRCBMain}>
        <View style={{ flex: 0.49, paddingTop: 8 }}>
          <Image
            key={item?.instructionAssests}
            source={{
              uri: item?.instructionAssests,
              cache: "only-if-cached",
            }}
            style={styles.RCBTCImage}
          />
        </View>
        <View
          style={[
            {
              flex: 0.49,
              justifyContent: "center",
            },
          ]}
        >
          <Text style={styles.TipCardRCBTitle}>{item?.instructionData}</Text>
        </View>
      </View>
    </View>
  );
};

const DCarousal = ({ data, ItemComponent }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const flatListRef = useRef(null);

  const handleOnNext = () => {
    if (currentIndex === data?.length - 1) {
      onContinue();
      return;
    }
    setCurrentIndex(currentIndex + 1);
  };

  const handleOnPrev = () => {
    if (currentIndex === 0) return;
    setCurrentIndex(currentIndex - 1);
  };

  const onLayout = () => {
    flatListRef?.current?.scrollToIndex({
      animated: true,
      index: 0,
      viewPosition: 0.5,
    });
  };

  return (
    <FlatList
      initialScrollIndex={0}
      onLayout={onLayout}
      data={data}
      keyExtractor={(item, index) => `${item?.title}_${index}`}
      renderItem={({ item }) => <ItemComponent {...item} />}
      showsHorizontalScrollIndicator={false}
      horizontal
      pagingEnabled
      ref={flatListRef}
      scrollEnabled={false}
      contentContainerStyle={{}}
    />
  );
};

export const Carousal = DCarousal;

let SCREEN_WIDTH = getMaxWidth();

const styles = StyleSheet.create({
  RCBTCImage: {
    height: "100%",
    width: "100%",
    borderRadius: 8,
    resizeMode: "contain",
  },
  TipCardContainer: {
    flex: 1,
    width: SCREEN_WIDTH * 0.95,
    marginHorizontal: 24,
    paddingHorizontal: 24,
  },
  TipCardRCBMain: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "space-between",
  },
  TipCardGuideMain: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  TipCardRCBTitle: { fontSize: 20, fontFamily: "Muli-Bold", fontWeight: "700" },
  TipCardGuideTitle: {
    marginVertical: 8,
    fontWeight: "400",
    fontSize: 18,
    fontFamily: "Muli-Regular",
    color: "#000000",
  },
  muliBoldDB: {
    fontFamily: "Muli-Bold",
    color: Colors.darkBlack,
  },
});
