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 Colors from "react-native-digitcamera/src/common/Colors";

const actionTypes = {
  PUSH_COMPLETED_ACTIVITIES: "PUSH_COMPLETED_ACTIVITIES",
  UPDATE_COMPLETED_ACTIVITIES: "UPDATE_COMPLETED_ACTIVITIES",
  RESET_COMPLETED_ACTIVITIES: "UPDATE_COMPLETED_ACTIVITIES",
};

const actions = {
  update: (payload) => {
    return {
      type: actionTypes.UPDATE_COMPLETED_ACTIVITIES,
      payload: payload,
    };
  },
  push: (payload) => {
    return {
      type: actionTypes.PUSH_COMPLETED_ACTIVITIES,
      payload: payload,
    };
  },
};

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

const resetState = {
  mCompletedActivities: [],
};

const mCompletedActivityReducer = (state = intialState, action) => {
  switch (action.type) {
    case actionTypes.UPDATE_COMPLETED_ACTIVITIES: {
      const mCompletedActivities = action.payload;

      // make it false only one time
      if (state.loading) {
        return {
          ...state,
          mCompletedActivities: mCompletedActivities,
          loading: false,
        };
      }
      return {
        ...state,
        mCompletedActivities: mCompletedActivities,
      };
    }
    case actionTypes.PUSH_COMPLETED_ACTIVITIES: {
      const mCompletedActivity = action.payload;
      return {
        ...state,
        mCompletedActivities: [
          ...state.mCompletedActivities,
          mCompletedActivity,
        ],
      };
    }
    case actionTypes.RESET_COMPLETED_ACTIVITIES:
      return resetState;
  }
};

const MediaStatusSchema = [];

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

const _renderItem = ({ item, index }) => {
  const newProps = {
    item,
    type: "COMPLETED",
  };
  return <ActivityView {...newProps} />;
};

const getMultiActivityData = async (dispatcher) => {
  const piMediaStatus = await Database.get("PIMediaStatus");
  const mCompletedActivities = piMediaStatus.filter(
    (item) => item.activityStatus === "COMPLETED"
  );

  /**
   *  add following logic here
   *  update reducer only when currentState.length < mCompletedActivities.length
   *  if mCompletedActivities.length === 0, reset the state
   * */

  dispatcher(actions.update(mCompletedActivities));
};

const CompletedSceneView = () => {
  const [mCompletedState, mCompletedDispatcher] = useReducer(
    mCompletedActivityReducer,
    intialState
  );

  const { mCompletedActivities, loading } = mCompletedState;

  useEffect(() => {
    const itr = setInterval(() => {
      getMultiActivityData(mCompletedDispatcher);
    }, 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>
      ) : (
        <FlatList
          data={mCompletedActivities}
          keyExtractor={(item, index) => index.toString()}
          ListEmptyComponent={_emptyItem}
          renderItem={_renderItem}
          contentContainerStyle={{ flexGrow: 0.9 }}
        />
      )}
    </View>
  );
};

export default CompletedSceneView;

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