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 {
  UELogEvent,
  UELogMessage,
} from "../common/libEventLog/UserExperior/LibUserExperior";
import Database from "../../../../Components/common/DAsyncStorage";

const Progress = ({ navigation, route }) => {
  const [, updateState] = React.useState();
  const forceUpdate = React.useCallback(() => updateState({}), []);
  const [UploadImageDataCount, setUploadImageDataCount] = useState(0);
  const [progress, setProgress] = useState(0);
  // const UploadImageDataCount = useSelector(
  //   (state) =>
  //     state.UploadImageData?.uploadImageInfo?.uploadImageCount
  // );
  // const imageClickedCountDetails = useSelector(
  //   (state) => state.imageClickedCountDetails
  // );
  var { TotalImage } = route.params;
  var uploadedInterval;
  useEffect(() => {
    const getUploadCount = async () => {
      var PIUploadedCount = await Database.get("PIUploadedCount");
      setUploadImageDataCount(PIUploadedCount?.uploadedCount);
      if (TotalImage <= 0) {
        TotalImage = 1;
      }
      setProgress(UploadImageDataCount / TotalImage);
    };
    uploadedInterval = setInterval(() => {
      getUploadCount();
    }, 1000);

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

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

  const navigateTOthankYou = async () => {
    var PIVechicleData = await Database.get("PIVechicleData");
    var activityId = PIVechicleData?.activityId;
    const interval = setInterval(() => {
      if (UploadImageDataCount >= TotalImage) {
        // if (true) {
        navigation.navigate("ThankYou", { activityId: activityId });
        clearInterval(interval);
        clearInterval(uploadedInterval);
      }
      UELogEvent("Checking Uploaded Image Count.....", {
        "Clicked Count": JSON.stringify(TotalImage),
        "Uploaded Count": JSON.stringify(UploadImageDataCount),
      });
    }, 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/cycle.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={
            TotalImage == undefined ? 0 : 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;
