import { View, Text, Image } from "react-native";
import { ProgressBar } from "react-native-paper";
import React, { useState, useEffect } from "react";
import { useSelector } from "react-redux";
const car = require("../../../common/Image/new/four_wheeler.png");
import style from "react-native-digitcamera/src/common/CommonStyle";
import MCIcon from "react-native-vector-icons/MaterialCommunityIcons";
import Colors from "react-native-digitcamera/src/common/Colors";

const setTime = () => {
  const started_at = new Date();

  var seconds_elapsed = (new Date().getTime() - started_at.getTime()) / 1000;
  var bytes_per_second = seconds_elapsed
    ? uploadedArray.length / seconds_elapsed
    : 0;
  var Kbytes_per_second = bytes_per_second / 1024;
  var remaining_bytes = item.mediaUpload.length - uploadedArray.length;
  var seconds_remaining = seconds_elapsed
    ? remaining_bytes / bytes_per_second
    : "calculating";
  console.log("seconds_remaining:: ", Kbytes_per_second, seconds_remaining);
  var time = {
    uploadSpeed: Kbytes_per_second,
    secondsRemaining: seconds_remaining,
  };
  console.log("time:: ****", time);
  setUploadTimeAndSpeed(time);
};

const getTimeInMinAndSec = (sec) => {
  if (!sec || sec === "calculating") {
    return `0 sec`;
  }
  const min = sec / 60;
  const remSec = sec % 60;
  return `${Math.floor(min)} min ${Math.floor(remSec)} sec`;
};

const getSpeedInMbps = (speed) => {
  if (!speed) {
    return `0 Mbps`;
  }
  return `${(speed / 1024).toFixed(1) * 8} Mbps`;
};

const CompletedStatusView = ({ item }) => {
  return (
    <View
      style={{
        // flex: 0.33,
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        paddingVertical: 5,
      }}
    >
      <Text
        style={[
          style.muliBoldDB,
          {
            flexDirection: "column",
            color: "#10B363",
            fontSize: 11,
          },
        ]}
      >
        Upload Done
      </Text>

      <Text
        style={[
          style.muliboldBB,
          {
            flexDirection: "column",
            color: "#999999",
            fontSize: 10,
          },
        ]}
      >
        {item.date}
      </Text>
    </View>
  );
};

const InProgressStatusView = ({ item, hasInternetAccess }) => {
  const { uploadSpeed, secondsRemaining } = item;
  if (hasInternetAccess === true) {
    return (
      <View
        style={{
          flexDirection: "row",
          paddingVertical: 5,
          justifyContent: "space-between",
        }}
      >
        <Text
          style={[
            style.muliBoldDB,
            {
              flexDirection: "column",
              color: "#10B363",
              fontSize: 12,
            },
          ]}
        >
          Uploading
        </Text>
        <Text
          style={[
            style.muliRegLG,
            {
              flexDirection: "column",
              color: "#000000",
              fontSize: 10,
            },
          ]}
        >
          <MCIcon
            name="wifi"
            size={14}
            color="black"
            style={{ marginRight: 4 }}
          />
          {getSpeedInMbps(uploadSpeed)}
        </Text>
        <Text
          style={[
            style.muliRegLG,
            {
              flexDirection: "column",
              color: "#999999",
              fontSize: 10,
              fontStyle: "italic",
            },
          ]}
        >
          {getTimeInMinAndSec(secondsRemaining)}
        </Text>
      </View>
    );
  } else if (hasInternetAccess === false) {
    return (
      <View
        style={{
          flex: 0.33,
          flexDirection: "row",
          paddingVertical: 5,
        }}
      >
        <Text
          style={[
            style.muliRegLG,
            {
              flex: 0.5,
              flexDirection: "column",
              color: "#999999",
              fontSize: 12,
            },
          ]}
        >
          Upload Paused
        </Text>

        <View
          style={[
            {
              flex: 0.5,
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
              color: "#999999",
              // fontSize: 10,
            },
          ]}
        >
          <MCIcon
            name="wifi-off"
            size={16}
            color="red"
            style={{ marginRight: 4 }}
          />
          <Text style={[style.muliRegLG, { fontSize: 10 }]}> Poor Network</Text>
        </View>
      </View>
    );
  } else {
    return (
      <View
        style={{
          flex: 0.33,
          flexDirection: "row",
          padding: 5,
        }}
      >
        <Text
          style={{
            flex: 0.5,
            flexDirection: "column",
            color: "#999999",
            fontSize: 12,
          }}
        >
          loading progress
        </Text>
      </View>
    );
  }
};

const ServiceFailureStatusView = ({ item, hasInternetAccess }) => {
  return (
    <View
      style={{
        // flex: 0.33,
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        paddingVertical: 5,
      }}
    >
      <Text
        style={[
          style.muliBoldDB,
          {
            flexDirection: "column",
            color: "#10B363",
            fontSize: 10,
            color: Colors.digitErrorRed,
          },
        ]}
      >
        Upload failed
      </Text>

      <Text
        style={[
          style.muliboldBB,
          {
            flexDirection: "column",
            color: "#999999",
            fontSize: 8,
          },
        ]}
      >
        try after some time
      </Text>
    </View>
  );
};

const getActivityView = ({ props, type }) => {
  switch (type) {
    case "IN-PROGRESS":
      return <InProgressStatusView {...props} />;
    case "COMPLETED":
      return <CompletedStatusView {...props} />;
    case "SERVICE_FAILURE":
      return <ServiceFailureStatusView {...props} />;
    default:
      return <CompletedStatusView {...props} />;
  }
};

const getProgress = (progress, type) => {
  let numberedProgress = 0;
  if (type === "COMPLETED") {
    numberedProgress = 1;
  } else if (type === "IN-PROGRESS") {
    numberedProgress = progress ?? 0;
  }
  return numberedProgress;
};

const ActivityView = ({ item, type }) => {
  const { progress, serviceFailure } = item;

  const [hasInternetAccess, setInternetAccess] = useState(undefined);

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

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

  // useEffect(() => {}, [item.imageProgress]);

  return (
    <View
      style={{
        flexDirection: "row",
        padding: 16,
        borderBottomColor: "#e9ebed",
        borderBottomWidth: 0.4,
        justifyContent: "space-evenly",
        alignItems: "center",
        backgroundColor: serviceFailure ? "#faeded" : "white",
      }}
    >
      <View
        style={{
          flex: 0.3,
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Image
          source={car}
          resizeMode={"contain"}
          style={{
            aspectRatio: 1,
            alignSelf: "center",
            borderRadius: 5,
          }}
        />
      </View>
      <View
        style={{
          flex: 0.6,
          flexDirection: "column",
          paddingVertical: 8,
        }}
      >
        <View
          style={{
            flexDirection: "row",
            paddingVertical: 5,
          }}
        >
          <Text style={[style.muliboldBB]}>
            {`${item.regNumber ?? ""}${
              item.policyNumber ? " - " : ""
            }${item.policyNumber ?? ""}`}
          </Text>
        </View>
        <ProgressBar
          progress={getProgress(progress, type)}
          color={"#FFBB00"}
          style={{
            height: 4,
            width: "100%",
            borderRadius: 12,
            backgroundColor: "#EAEAEA",
          }}
        />
        {getActivityView({ props: { item, hasInternetAccess }, type: type })}
      </View>
    </View>
  );
};

export default ActivityView;
