import React, { useEffect, useState } from "react";
import { StyleSheet, View, Image, Text, BackHandler } from "react-native";
import { translate } from "react-native-digitcamera/src/common/localize/i18n";
import { ProgressBar } from "react-native-paper";
import reactotron from "reactotron-react-native";
import Header from "./Header";
import Orientation from "../../../react-native-orientation";
import { useSelector } from "react-redux";

import Database from "../../../../Components/common/Database";
let realm = Database.getRealm();
var PIVechicleData = realm.objects("PIVechicleData");

const Progress = ({ navigation, route }) => {
  const [, updateState] = React.useState();
  const forceUpdate = React.useCallback(() => updateState({}), []);
  const [TotalImage, setTotalImage] = useState(0);
  const [UploadImageDataCount, setUploadImageDataCount] = useState(0);

  // const UploadImageDataCount = useSelector(
  //   (state) =>
  //     state.UploadImageData?.uploadImageInfo?.uploadImageCount
  // );
  // const imageClickedCountDetails = useSelector(
  //   (state) => state.imageClickedCountDetails
  // );
  setInterval(() => {
    var PIclickedCount = realm.objects("PIclickedCount");
    var PIUploadedCount = realm.objects("PIUploadedCount");
    setTotalImage(PIclickedCount[0]?.clickedCount);
    setUploadImageDataCount(PIUploadedCount[0]?.uploadedCount);
  }, 1000);

  var activityId = PIVechicleData[0]?.activityId;

  useEffect(() => {
    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      () => {
        return true;
      }
    );

    return () => {
      backHandler.remove();
    };
  }, []);

  const navigateTOthankYou = () => {
    setTimeout(() => {
      if (UploadImageDataCount >= TotalImage) {
        // if (true) {
        navigation.navigate("ThankYou", { activityId: activityId });
      }
    }, 3000);
  };

  return (
    <View style={styles.main}>
      <Header
        onlanguagechange={() => {
          forceUpdate();
        }}
        onbackPress={() => {
          navigation.goBack();
        }}
      />
      {/* GIF view */}
      <View style={styles.gifView}>
        <Image
          source={{
            uri: "https://d2h44aw7l5xdvz.cloudfront.net/assets/gif/time-animation-loader.gif",
          }}
          style={{ width: 146, height: 146, alignSelf: "center" }}
        />
      </View>
      {/* Progress View */}
      <View style={styles.progressView}>
        <Text style={styles.processingText}>
          {translate("Processing Images") + " "}
          {!!UploadImageDataCount && !!TotalImage
            ? UploadImageDataCount + " / " + TotalImage
            : 0 + " / " + 0}
        </Text>
        <ProgressBar
          progress={UploadImageDataCount / TotalImage}
          color={"#FFBB00"}
          style={{ height: 12, borderRadius: 6, backgroundColor: "#F5F5F5" }}
        />
        {navigateTOthankYou()}
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  main: {
    flex: 1,
    backgroundColor: "#FFFFFF",
  },
  gifView: {
    flex: 0.5,
    justifyContent: "flex-end",
    marginBottom: 40,
    marginLeft: 24,
    marginRight: 24,
  },
  progressView: {
    flex: 0.5,
    marginLeft: 24,
    marginRight: 24,
  },
  processingText: {
    fontFamily: "Muli-Bold",
    fontSize: 20,
    alignSelf: "center",
    marginBottom: 15,
  },
});
export default Progress;
