/*
RCBPreview.
Flow => 

Navigate to this screen from tutorial
1.capture one photo redirect back to rcb
    -> capture->stencilanimation->proceed->check for rcb1 ->  dispatch uri ->back to rcbpreview
2.capture second photo redirect back to rcb
    -> capture->stencilanimation->proceed->check for rcb2 -> dispatch uri ->back to rcbpreview
3.capture n photo redirect back to rcb
    -> capture->stencilanimation->proceed->check for rcbN -> dispatch uri ->back to rcbpreview
4. only clicking on proceed, run next stencil.

changes in PreviewMedia,StencilAnimation,RCBPreview.
*/

import React, { useEffect, useMemo, useState } from "react";
import {
  Text,
  View,
  SafeAreaView,
  Platform,
  StyleSheet,
  Image,
  Dimensions,
  ScrollView,
  StatusBar,
  FlatList,
  Alert,
  TouchableOpacity,
} from "react-native";
import Orientation from "react-native-orientation";
import Carousel from "react-native-snap-carousel";
import {
  PrimaryButton,
  DashedButton,
  Spinner,
} from "react-native-digitcamera/src/common/ThemedComponents";
import Header from "./Header";
import Database from "../../../../Components/common/DAsyncStorage";
import style from "../../../../Components/common/CommonStyle";
import { useSelector, useDispatch } from "react-redux";
const camera = require("react-native-digitcamera/src/common/Image/camera.png");
const deleteIcon = require("react-native-digitcamera/src/common/Image/deleteIcon.png");
import IIcon from "react-native-vector-icons/Ionicons";
import MCIcon from "react-native-vector-icons/MaterialCommunityIcons";
import {
  UELogEvent,
  UELogMessage,
} from "../common/libEventLog/UserExperior/LibUserExperior";
import { CreateActivityId } from "react-native-digitcamera/src/Screens/OfflineFlow/CreateActivityId";
import NetInfo from "@react-native-community/netinfo";
import { checkInternetSpeed } from "react-native-digitcamera/src/Screens/OfflineFlow/CommonFunc";
import { useIsFocused } from "@react-navigation/native";
import Colors from "../common/Colors";
import { checkHardwareAvailableForML } from "react-native-digitcamera/src/common/CheckHardwareML";
import getConfig from "../common/remote_config/FirebaseConfig";
import { FIREBASE_CONFIG_CONFIDENCE } from "react-native-digitcamera/src/Screens/ProcessRawOutput";
import { Dynatrace } from "@dynatrace/react-native-plugin";
import { getAndroidPermission } from "react-native-digitcamera/src/common/Permissions";
import { getMaxWidth } from "react-native-digitcamera/src/common/scaling";

const iOS = Platform.OS === "ios";
var isFocused;

/*Initial SCREEN_WIDTH*/
let SCREEN_WIDTH = getMaxWidth();

/* Local Image or Remote */
let IS_LOCAL = false;
const rcBookData = [
  {
    name: "RCB1",
    image: "https://cdn.godigit.com/digitEdgeAssets/Motor/4W_PI_RCB1_V2.jpg",
    info: "RC FRONT SAMPLE",
  },
  {
    name: "RCB2",
    image: "https://cdn.godigit.com/digitEdgeAssets/Motor/4W_PI_RCB2_V2.jpg",
    info: "RC BACK SAMPLE",
  },
];

let ACTIVITY_ID;
const RCBPreviewScreen = ({ navigation, route }) => {
  const [isAddMoreEnable, setIsAddMoreEnable] = useState(true);
  const [isProceedEnable, setIsProceedEnable] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [RCBData, setRCBData] = useState();
  const [internetAvailable, setIsNetworkAvailable] = useState(false);

  const dispatch = useDispatch();
  isFocused = useIsFocused();

  const network = useSelector((state) => state.network);
  const { isInternetReachable } = network;

  useEffect(() => {
    if (isInternetReachable === true) {
      setIsNetworkAvailable(true);
    } else if (isInternetReachable === false) {
      setIsNetworkAvailable(false);
    }
  }, [network]);

  /* Fetch captured RCB images from Redux */
  const RCBUris = useSelector((state) => state.rcbPreviewData.rcbPreviewData);
  console.log("***RCBPreviewScreen *RCBUris", RCBUris);

  /* RCB1 */
  const RCB1Image = RCBUris.find((item) => item.name === "RCB1");
  console.log("***RCBPreviewScreen, RCB1Image", RCB1Image);
  /* RCB2 */
  const RCB2Image = RCBUris.find((item) => item.name === "RCB2");
  console.log("***RCBPreviewScreen, RCB2Image", RCB2Image);
  /* Other RC Images*/
  const MoreRCBImages = RCBUris.filter((item) => item.info === "RC More Pages");
  console.log("***RCBPreviewScreen, More RC Images", MoreRCBImages);

  if (RCBUris.length !== 0) {
    IS_LOCAL = true;
  }
  if (!iOS) {
    StatusBar.setBackgroundColor("white");
  }
  StatusBar.setBarStyle("dark-content");

  useEffect(() => {
    /* enable add more photos button once both rcb1 & rcb2 images are available */
    /* also enable proceed button */
    if (RCB1Image === undefined || RCB2Image === undefined) {
      setIsAddMoreEnable(true);
      setIsProceedEnable(false);
    } else {
      setIsAddMoreEnable(false);
      setIsProceedEnable(true);
    }
  }, [RCB1Image, RCB2Image]);

  useEffect(() => {
    /* Imported Component Static Methods */
    Orientation.lockToLandscapeLeft();
    /* Component Methods */
    // SCREEN_WIDTH = getMinWidth();
    getActivityId();
    getRCBInstructions();

    /* listeners */
    if (!iOS) {
      const Immersive = require("react-native-immersive").Immersive;
      Immersive.setImmersive(true);
    }

    /* unsubscribing listeners */
    // for re-render immersive
    let unsubscribe = navigation.addListener("focus", () => {
      if (!iOS) {
        const Immersive = require("react-native-immersive").Immersive;
        Immersive.setImmersive(true);
      }
    });

    return () => {
      unsubscribe();
    };
  }, []);

  /* Component Methods */

  /* Fetching Activity Id */
  const getActivityId = async () => {
    const VehicleData = await Database.get("PIVechicleData");
    ACTIVITY_ID = VehicleData?.activityId;
    console.log("^^^RCBPreviewScreen. getActivityId ", ACTIVITY_ID);
  };
  /* Fetching RCB Instruction */
  const getRCBInstructions = async () => {
    UELogEvent("RCBPreviewScreen.js getRCBInstructions. ", {
      data: "Dataa",
    });
    var instructionInDb = await Database.get("PIVechicleInstruction");
    const instructionArr = JSON.parse(instructionInDb?.instuction);

    let item = instructionArr.filter((item) => item.imageName.includes("RCB"));
    let newRCBData = [];
    if (item !== undefined && item.length !== 0) {
      /* once received remote assets we set IS_LOCAL to false*/
      IS_LOCAL = false;
      item.forEach((item) => {
        let RCBItem = {
          name: item.imageName,
          image: item.stepAssests,
          info: `RC ${item.imageName === "RCB1" ? "FRONT" : "BACK"} SAMPLE`,
        };
        newRCBData.push(RCBItem);
      });
    }
    setRCBData([...newRCBData]);
  };

  const handleRCBFrontPage = async () => {
    if (Platform.OS == "android") {
      await getAndroidPermission(
        () => {
          dispatch({
            type: "SET_CURRENT_IMAGE",
            payload: "RCB1",
          });
          // Load RCB Related Instruction
          // StencilAnimation should know that we asking for RCB  title
          // so passing toVideo as false, StencilAnimation will load RCB Titles
          moveNow(false);
        },
        async () => {
          await Linking.openSettings();
        }
      );
    } else {
      dispatch({
        type: "SET_CURRENT_IMAGE",
        payload: "RCB1",
      });
      // Load RCB Related Instruction
      // StencilAnimation should know that we asking for RCB  title
      // so passing toVideo as false, StencilAnimation will load RCB Titles
      moveNow(false);
    }
  };

  const handleRCBBackPage = async () => {
    if (Platform.OS == "android") {
      await getAndroidPermission(
        () => {
          dispatch({
            type: "SET_CURRENT_IMAGE",
            payload: "RCB2",
          });
          // Load RCB Related Instruction
          // StencilAnimation should know that we asking for RCB  title
          // so passing toVideo as false, StencilAnimation will load RCB Titles
          moveNow(false);
        },
        async () => {
          await Linking.openSettings();
        }
      );
    } else {
      dispatch({
        type: "SET_CURRENT_IMAGE",
        payload: "RCB2",
      });
      // Load RCB Related Instruction
      // StencilAnimation should know that we asking for RCB  title
      // so passing toVideo as false, StencilAnimation will load RCB Titles
      moveNow(false);
    }
  };

  const handleRCBMorePage = () => {
    dispatch({
      type: "SET_CURRENT_IMAGE",
      payload: "MORE",
    });
    // Load RCB Related Instruction
    // StencilAnimation should know that we asking for RCB  title
    // so passing toVideo as false, StencilAnimation will load RCB Titles
    moveNow(false);
  };

  const handleDeleteImage = (name) => {
    // run dispatch to delete images from redux
    dispatch({
      type: "DELETE_RCB_IMAGE_BY_TITLE",
      payload: name,
    });
  };

  const handleProceed = async () => {
    // Load Video Related Instruction
    // StencilAnimation should know that we asking for video instructions
    // so passing toVideo as true, StencilAnimation will load video instructions
    // moveNow(true);

    if (internetAvailable) {
      const demoVideoUri = await Database.get("PIDemoVideoURI");
      navigation.navigate("DemoVideo", { videoUri: demoVideoUri.uri });
    } else {
      navigation.navigate("QuickTips");
    }
  };

  // Move to camera
  const moveNow = async (toVideo) => {
    const PIVechicleData = await Database.get("PIVechicleData");
    const activityId = PIVechicleData?.activityId;
    const activityTypeId = PIVechicleData?.activityTypeId;
    const licensePlateNumber = PIVechicleData?.licensePlateNumber;

    const PIVechicleInstruction = await Database.get("PIVechicleInstruction");
    const instuction = PIVechicleInstruction?.instuction;

    console.log("[Info] . Quick Tips . moveNow() . instuction - ", instuction);

    if (internetAvailable) {
      const {
        ml_pose,
        ml_confidence,
        ml_OS_version,
        ml_RAM,
      } = await getConfig();
      var mlHardwareAvailable = await checkHardwareAvailableForML(
        ml_OS_version,
        ml_RAM
      );
      FIREBASE_CONFIG_CONFIDENCE.value = ml_confidence;
      console.log(
        "checkHardwareAvailableForML mlHardwareAvailable ",
        mlHardwareAvailable
      );
      console.log(
        "[Info] . Quick Tips . mlHardwareAvailable, ml_pose ",
        mlHardwareAvailable,
        ml_pose
      );
      UELogEvent("ml_pose", {
        value: ml_pose,
      });
      UELogEvent("mlHardwareAvailable", {
        value: mlHardwareAvailable,
      });
      Dynatrace.enterAction("ml_pose: " + ml_pose, Platform.OS);
      Dynatrace.enterAction(
        "mlHardwareAvailable: " + mlHardwareAvailable,
        Platform.OS
      );
      mlHardwareAvailable = mlHardwareAvailable && ml_pose;
      // if (__DEV__) {
      //   mlHardwareAvailable = true;
      // }
      UELogEvent("Machine Learning", {
        value: mlHardwareAvailable,
      });
      Dynatrace.enterAction(
        "Machine Learning: " + mlHardwareAvailable,
        Platform.OS
      );
      if (toVideo == false) {
        // Camera is going to capture the image only, and ML is not for it hence making it false
        mlHardwareAvailable = false;
      }
      navigation.navigate("Camera", {
        activityId,
        activityTypeId,
        licensePlateNumber,
        toVDO: toVideo,
        instruction: instuction,
        mlHardwareAvailable,
      });
    } else {
      if (toVideo == false) {
        // Camera is going to capture the image only, and ML is not for it hence making it false
        mlHardwareAvailable = false;
      }
      navigation.navigate("Camera", {
        activityId,
        activityTypeId,
        licensePlateNumber,
        toVDO: toVideo,
        instruction: instuction,
        mlHardwareAvailable,
      });
    }
  };

  /* Sub Components */
  const DashedButtonsItem = ({ item }) => {
    return (
      <DashedButton
        key={"" + item?.name}
        Title={`${ACTIVITY_ID}_${item.name}`}
        RightImage={deleteIcon}
        leftIcon={<IIcon name="checkmark" color={"green"} size={24} />}
        onDeletePress={() => {
          handleDeleteImage(item.name);
        }}
        buttonTextStyle={{
          alignItems: "flex-start",
          fontSize: 12,
        }}
        buttonLayoutStyle={{
          marginLeft: 0,
          marginRight: 0,
        }}
      />
    );
  };

  const _renderRcBookData = ({ item, index }) => {
    return (
      // Image View
      <View>
        {item.image == undefined ? null : (
          <View>
            {item.image && (
              <Image
                source={{ uri: item.image, cache: "only-if-cached" }}
                // resizeMethod={"scale"}
                // resizeMethod="resize"
                // resizeMode="center"
                resizeMode={"contain"}
                style={styles._renderBookItemImage}
              />
            )}
          </View>
        )}
        <Text style={[style.muliRegLG, styles._renderBookItemText]}>
          {item.info}
        </Text>
      </View>

      // <View>
      //   {item.image == undefined ? null : (
      //     // <View>
      //     //   {item.image && (
      //         <Image
      //           source={{ uri: item.image, cache: 'only-if-cached' }}
      //           // resizeMethod={"scale"}
      //           // resizeMethod="resize"
      //           // resizeMode="center"
      //           resizeMode= {"contain"}
      //           style={styles._renderBookItemImage}
      //         />
      //     //   )}
      //     // </View>

      //   )}
      //    <Text style={[style.muliRegLG, styles._renderBookItemText]}>
      //     {item.info}
      //   </Text>
      // </View>
    );
  };

  var myData = RCBUris.length === 0 ? RCBData : RCBUris;
  if (myData == undefined || myData == null) {
    myData = [];
  }

  const CustomHeader = () => {
    return (
      <TouchableOpacity
        hitSlop={{ bottom: 20, top: 20, left: 20, right: 20 }}
        onPress={() => {
          navigation.navigate("Toturial", { fromRCB: true });
        }}
      >
        <View style={{ justifyContent: "flex-start", flexDirection: "row" }}>
          <MCIcon
            name="arrow-bottom-left"
            size={24}
            color="black"
            style={{ transform: [{ rotate: "45deg" }] }}
          />
          <Text style={[style.muliBoldDB, styles.title, { marginLeft: 8 }]}>
            RC Book/Card
          </Text>
        </View>
      </TouchableOpacity>
    );
  };

  // return (
  //   <SafeAreaView
  //     edges={iOS ? ["top", "bottom", "right"] : []}
  //     style={styles.safeArea}
  //   >
  //     <CustomHeader />

  //     <View
  //       style={{
  //         flex: 1,
  //         justifyContent: "space-between",
  //       }}
  //     >
  //       {/* Body */}

  //       <View style={styles.bodyView}>
  //         <Spinner loading={isLoading} />
  //         {/* Image Preview */}

  //         <View style={styles.imagePreviewView}>
  //           <View style={{ marginBottom: 8 }}>
  //             {/* <Image

  //               source={{ uri: "https://d2h44aw7l5xdvz.cloudfront.net/CRM/PRM/oops_something_went_wrong.png",
  //               cache: "only-if-cached" }}
  //               resizeMethod={"scale"}
  //               resizeMode="contain"
  //               style={styles._renderBookItemImage}
  //             /> */}
  //             <Carousel
  //               layout="default"
  //               data={myData}
  //               // renderItem={_renderRcBookData}
  //               renderItem={({ item, index }) => (
  //                 <View>
  //                   {item.image == undefined ? null : (
  //                     <View>
  //                       {item.image && (
  //                         <Image
  //                           source={{
  //                             uri: item.image,
  //                             cache: "only-if-cached",
  //                           }}
  //                           // resizeMethod={"scale"}
  //                           // resizeMethod="resize"
  //                           // resizeMode="center"
  //                           resizeMode={"contain"}
  //                           style={styles._renderBookItemImage}
  //                         />
  //                       )}
  //                     </View>
  //                   )}
  //                   <Text style={[style.muliRegLG, styles._renderBookItemText]}>
  //                     {item.info}
  //                   </Text>
  //                 </View>
  //               )}
  //               sliderWidth={SCREEN_WIDTH}
  //               itemWidth={SCREEN_WIDTH}
  //               // layoutCardOffset={`12`}
  //               activeSlideAlignment={"start"}
  //               inactiveSlideScale={0}
  //               autoplay={true}
  //               loop={true}
  //             />
  //           </View>
  //         </View>

  //         {/* Actions */}
  //         <View style={styles.actionView}>
  //           {/* Title */}
  //           {/* <Text style={[style.muliBoldDB, styles.title]}>
  //               Please upload RC Book images
  //             </Text> */}
  //           {/* <View style={styles.titleView} /> */}
  //           <ScrollView style={styles.buttonsView}>
  //             {/* RC Front Page */}
  //             <View style={styles.scrollViewActionItem}>
  //               <View
  //                 style={{ flex: 0.5, flexDirection: "column", padding: 5 }}
  //               >
  //                 <Text style={[style.muliBoldDB, styles.buttonTitle]}>
  //                   RC Front Page
  //                 </Text>

  //                 {/* Once received captured image show dashed button with checkmark, otherwise primary button */}

  //                 {RCB1Image !== undefined ? (
  //                   <DashedButton
  //                     Title={`${ACTIVITY_ID}_${RCB1Image.name}`}
  //                     RightImage={deleteIcon}
  //                     leftIcon={
  //                       <IIcon name="checkmark" color={"green"} size={24} />
  //                     }
  //                     onDeletePress={() => {
  //                       handleDeleteImage("RCB1");
  //                     }}
  //                     buttonTextStyle={{ alignItems: "flex-start" }}
  //                     buttonLayoutStyle={{ marginLeft: 0, marginRight: 0 }}
  //                   />
  //                 ) : (
  //                   <PrimaryButton
  //                     style={styles.primaryButton}
  //                     onPress={handleRCBFrontPage}
  //                     icon={({ color, size }) => {
  //                       return (
  //                         <Image
  //                           source={camera}
  //                           style={{ width: 30, height: 30 }}
  //                         />
  //                       );
  //                     }}
  //                   >
  //                     {"Capture"}
  //                   </PrimaryButton>
  //                 )}
  //               </View>
  //               <View
  //                 style={{ flex: 0.5, flexDirection: "column", padding: 5 }}
  //               >
  //                 <Text style={[style.muliBoldDB, styles.buttonTitle]}>
  //                   RC Back Page
  //                 </Text>

  //                 {/* Once received captured image show dashed button with checkmark, otherwise primary button */}

  //                 {RCB1Image !== undefined ? (
  //                   <DashedButton
  //                     Title={`${ACTIVITY_ID}_${RCB1Image.name}`}
  //                     RightImage={deleteIcon}
  //                     leftIcon={
  //                       <IIcon name="checkmark" color={"green"} size={24} />
  //                     }
  //                     onDeletePress={() => {
  //                       handleDeleteImage("RCB1");
  //                     }}
  //                     buttonTextStyle={{ alignItems: "flex-start" }}
  //                     buttonLayoutStyle={{ marginLeft: 0, marginRight: 0 }}
  //                   />
  //                 ) : (
  //                   <PrimaryButton
  //                     style={styles.primaryButton}
  //                     onPress={handleRCBFrontPage}
  //                     icon={({ color, size }) => {
  //                       return (
  //                         <Image
  //                           source={camera}
  //                           style={{ width: 30, height: 30 }}
  //                         />
  //                       );
  //                     }}
  //                   >
  //                     {"Capture"}
  //                   </PrimaryButton>
  //                 )}
  //               </View>
  //             </View>

  //             {/* RC Back Page */}
  //             <View style={styles.scrollViewActionItem}>
  //               <Text style={[style.muliBoldDB, styles.buttonTitle]}>
  //                 RC Back Page
  //               </Text>
  //               {RCB2Image ? (
  //                 <DashedButton
  //                   Title={`${ACTIVITY_ID}_${RCB2Image.name}`}
  //                   RightImage={deleteIcon}
  //                   leftIcon={
  //                     <IIcon name="checkmark" color={"green"} size={24} />
  //                   }
  //                   onDeletePress={() => {
  //                     handleDeleteImage("RCB2");
  //                   }}
  //                   buttonTextStyle={{ alignItems: "flex-start" }}
  //                   buttonLayoutStyle={{ marginLeft: 0, marginRight: 0 }}
  //                 />
  //               ) : (
  //                 <PrimaryButton
  //                   style={styles.primaryButton}
  //                   onPress={handleRCBBackPage}
  //                   icon={({ color, size }) => {
  //                     return (
  //                       <Image
  //                         source={camera}
  //                         style={{ width: 30, height: 30 }}
  //                       />
  //                     );
  //                   }}
  //                 >
  //                   {"Capture"}
  //                 </PrimaryButton>
  //               )}
  //             </View>

  //             <View style={styles.scrollViewActionItem}>
  //               <Text style={[style.muliBoldDB, styles.buttonTitle]}>
  //                 Other RC Pages{" "}
  //                 <Text style={[style.muliRegLG, { fontSize: 10 }]}>
  //                   (if any)
  //                 </Text>
  //               </Text>
  //               {MoreRCBImages.length !== 0 &&
  //                 MoreRCBImages?.map((item) => {
  //                   return DashedButtonsItem({ item });
  //                 })}
  //               <PrimaryButton
  //                 style={[
  //                   styles.primaryButton,
  //                   isAddMoreEnable ? styles.primaryButtonDisabled : {},
  //                 ]}
  //                 onPress={handleRCBMorePage}
  //                 disabled={isAddMoreEnable} /* @Change */
  //               >
  //                 {"+   Add Photos"}
  //               </PrimaryButton>
  //             </View>
  //           </ScrollView>

  //           <View style={styles.proceedButton}>
  //             <PrimaryButton
  //               onPress={handleProceed}
  //               disabled={!isProceedEnable} /* @Change */
  //               style={[
  //                 !isProceedEnable ? { backgroundColor: "#DDDDDD" } : {},
  //               ]} /* @Change */
  //             >
  //               {"Proceed"}
  //             </PrimaryButton>
  //           </View>
  //         </View>
  //       </View>
  //     </View>
  //   </SafeAreaView>
  // );

  // return (
  //   <SafeAreaView
  //     edges={iOS ? ["top", "bottom", "right"] : []}
  //     style={styles.safeArea}
  //   >
  //     <View
  //       style={{
  //         flex: 1,
  //         justifyContent: "space-between",
  //       }}
  //     >
  //       <View style={styles.imagePreviewView} />
  //       <View style={styles.actionView} />
  //     </View>
  //   </SafeAreaView>
  // );
  return (
    <SafeAreaView
      edges={iOS ? ["top", "bottom", "right"] : []}
      style={styles.safeArea}
    >
      <Header
        customTitle={`RC Book/Card`}
        hideArrowBackButton={false}
        onlanguagechange={() => {
          forceUpdate();
        }}
        onbackPress={() => {
          if (navigation.canGoBack()) {
            navigation.pop();
          }
        }}
      />
      <View
        style={{
          flex: 1,
          flexDirection: "column",
          justifyContent: "space-between",
        }}
      >
        {/* Body */}

        <View style={styles.bodyView}>
          <Spinner loading={isLoading} />
          {/* Image Preview */}
          <View style={styles.imagePreviewView}>
            {/* <View style={{ marginBottom: 8 }}> */}
            <Carousel
              layout="default"
              data={myData}
              renderItem={({ item, index }) => {
                if (item) {
                  return (
                    <View style={{ height: "100%" }}>
                      <View style={styles.carousalItemContainer}>
                        <Image
                          source={{
                            uri: item.image,
                            cache: "only-if-cached",
                          }}
                          resizeMode={"contain"}
                          style={[
                            {
                              height: "100%",
                              width: "100%",
                              borderRadius: 12,
                              // aspectRatio: 1.5,
                              // padding: 2,
                            },
                          ]}
                        />
                      </View>
                      <Text style={styles._renderBookItemText}>
                        {item.info}
                      </Text>
                    </View>
                  );
                }
                return null;
              }}
              sliderWidth={SCREEN_WIDTH * 0.45}
              itemWidth={SCREEN_WIDTH * 0.45}
              // layoutCardOffset={`12`}
              activeSlideAlignment={"start"}
              inactiveSlideScale={0}
              autoplay={true}
              loop={true}
            />
            {/* </View> */}
          </View>
          {/* Actions */}
          {/* Once received captured image show dashed button with checkmark, otherwise primary button */}
          {/* Once received captured image show dashed button with checkmark, otherwise primary button */}
          {/* /* @Change */}
          {/* /* @Change */}
          <View style={styles.actionView}>
            {/* <ScrollView style={styles.buttonsView}> */}
            <View style={styles.scrollViewActionItem}>
              <View
                style={{
                  flex: 0.5,
                  flexDirection: "column",
                  padding: 5,
                }}
              >
                <Text style={[style.muliBoldDB, styles.buttonTitle]}>
                  RC Front Page
                </Text>

                {RCB1Image !== undefined ? (
                  <DashedButtonsItem item={RCB1Image} />
                ) : (
                  // <DashedButton
                  //   Title={`${ACTIVITY_ID}_${RCB1Image.name}`}
                  //   RightImage={deleteIcon}
                  //   leftIcon={
                  //     <IIcon name="checkmark" color={"green"} size={24} />
                  //   }
                  //   buttonTextStyle={{ fontSize: 12 }}
                  //   buttonLayoutStyle={
                  //     {
                  //       // marginLeft: 16,
                  //     }
                  //   }
                  //   onDeletePress={() => {
                  //     handleDeleteImage("RCB1");
                  //   }}
                  // />
                  <PrimaryButton
                    style={styles.primaryButton}
                    onPress={handleRCBFrontPage}
                    icon={({ color, size }) => {
                      return (
                        <Image
                          source={camera}
                          style={{ width: 30, height: 30 }}
                        />
                      );
                    }}
                  >
                    {"Capture"}
                  </PrimaryButton>
                )}
              </View>

              <View
                style={{
                  flex: 0.5,
                  flexDirection: "column",
                  padding: 5,
                }}
              >
                <Text style={[style.muliBoldDB, styles.buttonTitle]}>
                  RC Back Page
                </Text>
                {RCB2Image ? (
                  <DashedButtonsItem item={RCB2Image} />
                ) : (
                  // <DashedButton
                  //   Title={`${ACTIVITY_ID}_${RCB2Image.name}`}
                  //   RightImage={deleteIcon}
                  //   leftIcon={
                  //     <IIcon name="checkmark" color={"green"} size={24} />
                  //   }
                  //   onDeletePress={() => {
                  //     handleDeleteImage("RCB2");
                  //   }}
                  //   buttonTextStyle={{ fontSize: 12 }}
                  //   buttonLayoutStyle={
                  //     {
                  //       // marginRight: 16,
                  //     }
                  //   }
                  // />
                  <PrimaryButton
                    style={styles.primaryButton}
                    onPress={handleRCBBackPage}
                    icon={({ color, size }) => {
                      return (
                        <Image
                          source={camera}
                          style={{ width: 30, height: 30 }}
                        />
                      );
                    }}
                  >
                    {"Capture"}
                  </PrimaryButton>
                )}
              </View>
            </View>

            <View style={styles.scrollViewActionItem1}>
              <View style={{ flexDirection: "column" }}>
                <View style={styles.other}>
                  <Text style={[style.muliBoldDB, styles.buttonTitle]}>
                    Other RC Pages{" "}
                    <Text style={[style.muliRegLG, { fontSize: 10 }]}>
                      (if any)
                    </Text>
                  </Text>
                </View>
                <View style={styles.addphotos}>
                  <ScrollView style={styles.buttonsView}>
                    <View style={{ flexDirection: "column" }}>
                      {MoreRCBImages.length !== 0 &&
                        MoreRCBImages?.map((item) => {
                          return DashedButtonsItem({ item });
                        })}
                      <PrimaryButton
                        style={[
                          // styles.primaryButton,
                          isAddMoreEnable ? styles.primaryButtonDisabled : {},
                          { marginVertical: 4 },
                        ]}
                        mode={"outlined"}
                        onPress={handleRCBMorePage}
                        disabled={isAddMoreEnable}
                      >
                        {"+   Add Photos"}
                      </PrimaryButton>
                    </View>
                  </ScrollView>

                  {/* <TouchableOpacity
                    style={[
                      styles.primaryButton,
                      isAddMoreEnable ? styles.primaryButtonDisabled : {},
                    ]}
                  >
                    <Text style={styles.buttonlabel}>{"+   Add Photos"}</Text>
                  </TouchableOpacity> */}
                  {/* <PrimaryButton
                    style={[
                      styles.primaryButton,
                      isAddMoreEnable ? styles.primaryButtonDisabled : {},
                    ]}
                    onPress={handleRCBMorePage}
                    disabled={isAddMoreEnable}
                  >
                    {"+   Add Photos"}
                  </PrimaryButton> */}
                </View>
              </View>
            </View>

            {/* </ScrollView> */}
          </View>
        </View>
        <View style={styles.bodyView2}>
          <View style={{ flex: 0.7, flexDirection: "column" }} />
          <View style={styles.proceedButton}>
            {/* <PrimaryButton
              onPress={handleProceed}
              disabled={!isProceedEnable}
              style={[!isProceedEnable ? { backgroundColor: "#DDDDDD" } : {}]}
            >
              {"Proceed"}
            </PrimaryButton> */}
            <PrimaryButton
              style={[
                !isProceedEnable
                  ? {
                      backgroundColor: Colors.digitYellow,
                      align: "left",
                    }
                  : {},
              ]}
              onPress={handleProceed}
              disabled={!isProceedEnable}
            >
              Continue
            </PrimaryButton>
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
};

export default RCBPreviewScreen;

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: "white",
  },
  scrollViewActionItem: {
    marginBottom: 8,
    // padding:8,
    flex: 0.5,
    flexDirection: "row",
  },
  scrollViewActionItem1: {
    marginBottom: 8,
    // padding:8,
    flex: 0.5,
    flexDirection: "row",
  },
  imageView: {
    flex: 1,
    marginLeft: 24,
    marginRight: 24,
    backgroundColor: "red",
  },
  _renderBookItemImageView: {
    flex: 1,
    borderWidth: 2,
    borderColor: "#DDDDDD",
    borderRadius: 2,
    height: SCREEN_WIDTH / 2,
  },
  _renderBookItemImage: {
    // width: "100%",
    // height: "100%",
    // resizeMode: "contain",
    // flex: 1,
    // aspectRatio:1,

    width: "80%",
    height: "95%",
    margin: 8,
    // backgroundColor:'red'
    // borderRadius: 8,
  },
  _renderBookItemText: {
    // marginTop: 4,
    fontSize: 12,
    textAlign: "center",
    textTransform: "uppercase",
    color: "#999999",
    fontWeight: "700",
  },
  carousalItemContainer: {
    flex: 1,
    backgroundColor: "white",
    // elevation: 2,
    borderWidth: 1,
    borderColor: "#D9D9D9",
    borderRadius: 12,
    alignItems: "center",
    justifyContent: "center",
  },
  bodyView: {
    flex: 0.8,
    flexDirection: "row",
    justifyContent: "space-between",
    marginHorizontal: 5,
    // marginHorizontal:8,
    paddingVertical: 8,
  },
  bodyView2: {
    flex: 0.2,
    flexDirection: "row",
    justifyContent: "space-between",
    marginHorizontal: 5,
    // marginHorizontal:8,
    paddingVertical: 8,
  },
  imagePreviewView: {
    flex: 0.5,
    flexDirection: "column",
    // flex: 0.50,
    padding: 4,
    justifyContent: "center",
    alignItems: "center",
    // justifyContent: "space-between",
    // borderWidth: 1,
  },
  actionView: {
    flex: 0.5,
    flexDirection: "column",

    // flex: 0.50
  },
  titleView: {
    paddingHorizontal: 16,
  },
  buttonsView: {
    // paddingVertical: 8,
    // flexDirection: "row",
    paddingHorizontal: 8,
    width: "100%",
  },
  title: {
    fontSize: 16,
  },
  other: {
    flex: 0.2,
    flexDirection: "row",
  },
  addphotos: {
    flex: 0.8,
    flexDirection: "row",
  },
  buttonTitle: {
    fontSize: 14,
    marginLeft: 8,
    fontWeight: "700",
  },
  buttonlabel: {
    fontSize: 16,
    fontFamily: "Muli-Black",
    color: Colors.darkBlack,
    letterSpacing: 0,
  },
  primaryButton: {
    backgroundColor: "white",
    borderColor: "#000000",
    borderWidth: 1,
    borderRadius: 4,
    justifyContent: "center",
    marginVertical: 14,
    width: "95%",
  },
  primaryButtonDisabled: {
    /* @Change */ backgroundColor: "#FAFAFA",
    borderWidth: 1,
    borderColor: "#DDDDDD",
    color: "#444444",
  },
  proceedButton: {
    paddingVertical: 5,
    paddingHorizontal: 16,
    flex: 0.3,
    flexDirection: "column",
  },
});
