import { View, Text } from "react-native";
import React, { useEffect, useState } from "react";
import { Carousal, RCBTipCard } from "../common/DCarousal";
import Orientation from "react-native-orientation";
import Header from "./Header";
import { useNavigation } from "@react-navigation/core";
import Database from "../../../../Components/common/DAsyncStorage";
import { PrimaryButton } from "../common/ThemedComponents";
import { rcb_illustration } from "../common/Assets";
import { useSelector } from "react-redux";

const localData = [
  {
    instructionData:
      "Keep your vehicle’s Registration Certificate (RC Book/Card) ready",
    instructionAssests: rcb_illustration,
  },
];

const remoteData = [
  {
    instructionData:
      "Keep your vehicle’s Registration Certificate (RC Book/Card) ready",
    instructionAssests: {
      uri: "https://d2h44aw7l5xdvz.cloudfront.net/assets/img/I-08.png",
      cache: "only-if-cached",
    },
  },
];

const RCBQuickTips = ({ navigation, route }) => {
  const { data } = route.params;
  const [listData, setListData] = useState();
  const { isInternetReachable } = useSelector((state) => state.network);

  useEffect(() => {
    if (data && data.length > 0) {
      if (isInternetReachable) {
        setListData(remoteData);
      } else {
        setListData(localData);
      }
    } else {
      setListData(localData);
    }

    Orientation.lockToLandscapeLeft();
    // getRCBQuickTipData();
  }, []);

  /**
   * We can either extract rcb data from db
   * or we can pass the same from previous screen
   * i.e. Tutorial.js, for the current scenario
   * its okay to pass it from tutorial than making a async call to db
   * if there are multiple quick tips available in future we can use the below function
   * to get the data from DB
   */

  //   const getRCBQuickTipData = async () => {
  //     var PIVechicleInstruction = await Database.get("PIVechicleInstruction");
  //     var instructionArr = JSON.parse(PIVechicleInstruction?.instuction);
  //     let item = instructionArr.find((item) => item.imageName === "VDO");
  //     rcbObj = instructionArr.find((element) => {
  //       return element.imageName.includes("RCB");
  //     });
  //     data.pop();
  //     data.push(rcbObj);
  //   };

  return (
    <View style={{ flex: 1, backgroundColor: "white" }}>
      <Header
        customTitle={`RC Book/Card`}
        hideArrowBackButton={false}
        onbackPress={() => {
          if (navigation.canGoBack()) {
            navigation.pop();
          }
        }}
      />
      <View style={{ flex: 1, alignItems: "flex-end" }}>
        <Carousal data={listData} ItemComponent={RCBTipCard} />
        <PrimaryButton
          style={{ margin: 8, paddingHorizontal: 8 }}
          onPress={() => {
            navigation.navigate("RCBPreviewScreen");
          }}
        >
          Next
        </PrimaryButton>
      </View>
    </View>
  );
};

export default RCBQuickTips;
