import { View, Text, StyleSheet, FlatList, Image } from "react-native";
import React, { useState, useEffect, useReducer } from "react";
import { ProgressBar, ActivityIndicator } from "react-native-paper";
import style from "react-native-digitcamera/src/common/CommonStyle";
import ActivityView from "./ActivityView";
import Database from "../../../../../../Components/common/DAsyncStorage";
import store from "../../../redux/store";

const actionTypes = {
  PUSH_INPROGRESS_ACTIVITY: "PUSH_INPROGRESS_ACTIVITY",
  REPLACE_INPROGRESS_ACTIVITY: "REPLACE_INPROGRESS_ACTIVITY",
  UPDATE_INPROGRESS_ACTIVITIES: "UPDATE_INPROGRESS_ACTIVITIES",
  RESET_INPROGRESS_ACTIVITIES: "UPDATE_INPROGRESS_ACTIVITIES",
  ADD_SERVICE_FAILURE_INPROGRESS_ACTIVITY:
    "ADD_SERVICE_FAILURE_INPROGRESS_ACTIVITY",
};

const actions = {
  update: (payload) => {
    return {
      type: actionTypes.UPDATE_INPROGRESS_ACTIVITIES,
      payload: payload,
    };
  },
  push: (payload) => {
    return {
      type: actionTypes.PUSH_INPROGRESS_ACTIVITY,
      payload: payload,
    };
  },
  replace: (payload) => {
    return {
      type: actionTypes.REPLACE_INPROGRESS_ACTIVITY,
      payload: payload,
    };
  },
  reset: () => {
    return {
      type: actionTypes.RESET_INPROGRESS_ACTIVITIES,
    };
  },
  addSeriveFailure: (payload) => {
    return {
      type: actionTypes.ADD_SERVICE_FAILURE_INPROGRESS_ACTIVITY,
      payload: payload,
    };
  },
};

const intialState = {
  mInProgressActivities: [],
  serviceFailure: {},
  loading: true,
};

const resetState = {
  mInProgressActivities: [],
};

const getProgress = (sumOfProgress, totalDocuments) => {
  if (sumOfProgress && totalDocuments) {
    const result = (sumOfProgress / totalDocuments) * 0.01;
    return parseFloat(result.toFixed(2));
  }
  return 0;
};

const createProgressObjects = (dUploadProgress, dispatcher) => {
  const dProgressMap = {};
  const dLengthMap = {};
  const dTimeMap = {};
  const dSpeedMap = {};

  for (let itx in dUploadProgress) {
    const activityId = itx.split("_")[0];
    dProgressMap[activityId] = 0;
    dLengthMap[activityId] = 0;
    dTimeMap[activityId] = 0;
    dSpeedMap[activityId] = 0;
  }

  for (let itx in dUploadProgress) {
    const activityId = itx.split("_")[0];
    if (itx.includes(activityId)) {
      dLengthMap[activityId] += 1;
      dProgressMap[activityId] += dUploadProgress[itx].progress;
      dTimeMap[activityId] += dUploadProgress[itx].secondsRemaining;
      dSpeedMap[activityId] += dUploadProgress[itx].uploadSpeed;
    }
  }

  for (let dProgress in dProgressMap) {
    dispatcher(
      actions.replace({
        activityId: dProgress,
        progress: getProgress(dProgressMap[dProgress], dLengthMap[dProgress]),
        uploadSpeed: dSpeedMap[dProgress],
        secondsRemaining: dTimeMap[dProgress],
      })
    );
  }
};

const mInProgressActivityReducer = (state = intialState, action) => {
  switch (action.type) {
    case actionTypes.UPDATE_INPROGRESS_ACTIVITIES: {
      const mInProgressActivities = action.payload;
      // make it false only one time
      if (state.loading) {
        return {
          ...state,
          mInProgressActivities: mInProgressActivities,
          loading: false,
        };
      }
      return {
        ...state,
        mInProgressActivities: mInProgressActivities,
      };
    }
    case actionTypes.PUSH_INPROGRESS_ACTIVITY: {
      const mInProgressActivity = action.payload;
      return {
        ...state,
        mInProgressActivities: [
          ...state.mInProgressActivities,
          mInProgressActivity,
        ],
      };
    }
    case actionTypes.REPLACE_INPROGRESS_ACTIVITY: {
      const {
        activityId,
        progress,
        secondsRemaining,
        uploadSpeed,
      } = action.payload;
      const newMappedArray = state.mInProgressActivities.map((item) => {
        if (item.activityId.toString() === activityId.toString()) {
          return {
            ...item,
            progress: progress,
            secondsRemaining: secondsRemaining,
            uploadSpeed: uploadSpeed,
          };
        }
        return item;
      });
      return {
        ...state,
        mInProgressActivities: newMappedArray,
      };
    }
    case actionTypes.ADD_SERVICE_FAILURE_INPROGRESS_ACTIVITY: {
      const { activityId } = action.payload;
      const newObj = { ...state.serviceFailure, activityId };
      return { ...state, serviceFailure: newObj };
    }
    case actionTypes.RESET_INPROGRESS_ACTIVITIES:
      return resetState;
  }
};

const MediaStatusSchema = [];

const _emptyItem = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text style={[style.muliRegLG, { fontSize: 14 }]}>
        No in progress data available
      </Text>
    </View>
  );
};

const mItem = {
  activityId: 1368621,
  activityTypeId: 5,
  policyNumber: "",
  regNumber: "MH67TI8086",
  activityStatus: "IN-PROGRESS",
  mode: "ONLINE",
  mediaUpload: [
    {
      status: "uploaded",
      uri:
        "file:///data/user/0/com.godigit.digitselfinspection/cache/ReactNative-snapshot-image8863295569268550588.jpg",
      imageName: "RCB1",
    },
    {
      status: "uploaded",
      uri:
        "file:///data/user/0/com.godigit.digitselfinspection/cache/ReactNative-snapshot-image3036559262504654695.jpg",
      imageName: "RCB2",
    },
    {
      status: "uploaded",
      uri:
        "file:///data/user/0/com.godigit.digitselfinspection/cache/VisionCamera-20221111_1615158200310527994946525.mp4",
      imageName: "VDO",
    },
  ],
  date: "11 Nov 2022",
  imageProgress: 0,
  serviceFailure: true,
};

const _renderItem = ({ item, index }) => {
  const serviceFailed = item?.serviceFailure;
  const type = serviceFailed ? "SERVICE_FAILURE" : "IN-PROGRESS";
  const newProps = {
    item,
    type: type,
  };
  return <ActivityView {...newProps} />;
};

const getMultiActivityData = async (oldState, dispatcher) => {
  const piMediaStatus = await Database.get("PIMediaStatus");
  const inProgressActivities = piMediaStatus.filter(
    (item) => item.activityStatus === "IN-PROGRESS"
  );

  // this should only update when there is new in progress activity

  if (oldState.mInProgressActivities.length < inProgressActivities.length) {
    dispatcher(actions.update(inProgressActivities));
  }

  //if there is nothing in progress, empty the redux
  if (inProgressActivities.length === 0) {
    dispatcher(actions.reset());
  }

  // this will update progress for each in progress item

  if (inProgressActivities.length > 0) {
    const dProgressMap = store.getState().uploadProgress.dProgressMap;
    createProgressObjects(dProgressMap, dispatcher);
  }

  // inProgressActivities.forEach((item) => {
  //   //handle activityTypeId here
  //   //for 4w
  //   let imageProgress = 0;

  //   const mediaUploadedLength =
  //     item.mediaUpload.filter((item) => item.status === "uploaded").length ?? 0;
  //   const totalLength = item.mediaUpload.length;

  //   if (mediaUploadedLength === 0 || totalLength === 0) {
  //     imageProgress = 0;
  //   } else {
  //     imageProgress = (mediaUploadedLength / totalLength).toFixed(2);
  //   }

  //   //for cv imageProgress will be directly there
  //   dispatcher(
  //     actions.replace({
  //       activityId: item.activityId,
  //       newProgress: imageProgress,
  //     })
  //   );
  // });
};

const InProgressSceneView = () => {
  const [mInProgressState, mInProgressDispatcher] = useReducer(
    mInProgressActivityReducer,
    intialState
  );

  const { mInProgressActivities, loading, serviceFailure } = mInProgressState;

  useEffect(() => {
    const itr = setInterval(() => {
      getMultiActivityData(mInProgressState, mInProgressDispatcher);
    }, 1000);
    return () => {
      clearInterval(itr);
    };
  }, []);

  return (
    <View style={styles.main}>
      {loading ? (
        <View
          style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
        >
          <ActivityIndicator
            style={{ alignSelf: "center" }}
            animating={true}
            color={"#D3D3D3"}
            size={"large"}
          />
        </View>
      ) : (
        [
          Object.values(serviceFailure).length > 0 && (
            <View
              style={{
                flex: 0.1,
                backgroundColor: "#FFFAEB",
                justifyContent: "space-evenly",
                paddingHorizontal: 16,
              }}
            >
              <Text style={[style.muliboldBB, { fontSize: 12 }]}>
                We are facing technical difficulties please try again later
              </Text>
            </View>
          ),
          <FlatList
            data={mInProgressActivities}
            keyExtractor={(item, index) => index.toString()}
            ListEmptyComponent={_emptyItem}
            renderItem={_renderItem}
            contentContainerStyle={{ flexGrow: 0.8 }}
          />,
        ]
      )}
    </View>
  );
};

export default InProgressSceneView;

const styles = StyleSheet.create({
  main: {
    flex: 1,
    backgroundColor: "#FFFFFF",
  },
});
