import React, { useState, useEffect } from "react";
import {
  ScrollView,
  StyleSheet,
  Text,
  View,
  Image,
  StatusBar,
  TouchableOpacity,
  Platform,
  PermissionsAndroid,
  BackHandler,
  Alert,
} from "react-native";
import {
  SCREEN_WIDTH,
  SCREEN_HEIGHT,
  SELFI_IMAGE,
  VIDEO_TITLE_HN,
  VIDEO_TITLE,
  SELFI_IMAGE_HN,
} from "../common/Constants";
import Colors from "../common/Colors";
import { RNCamera } from "react-native-camera";
import Orientation from "../../../react-native-orientation";
import reactotron from "reactotron-react-native";
import { translate } from "react-native-digitcamera/src/common/localize/i18n";
import DeviceInfo from "react-native-device-info";
import { SafeAreaView } from "react-native-safe-area-context";
import {
  accelerometer,
  gyroscope,
  magnetometer,
  gravity,
  setUpdateIntervalForType,
  SensorTypes,
} from "react-native-sensors";
const iOS = Platform.OS === "ios";
import { ProgressBar } from "react-native-paper";
import BackgroundTimer from "react-native-background-timer";

const camera_shutter = require("../../src/common/Image/camera_shutter.png");
const left_bottom = require("../../src/common/Image/left_bottom.png");
const left_top = require("../../src/common/Image/left_top.png");
const right_bottom = require("../../src/common/Image/right_bottom.png");
const right_top = require("../../src/common/Image/right_top.png");
const start_recording = require("../../src/common/Image/start_recording.png");
const stop_recording = require("../../src/common/Image/stop_recording.png");
const flashOn = require("../../src/common/Image/flash_on.png");
const flashOff = require("../../src/common/Image/flash_off.png");
//sensors
let accSubscription;
const Camera = ({ navigation, route }) => {
  const [cameraState, SetCameraState] = useState("");
  const [staincil, SetStaincil] = useState("");
  const [date, SetDate] = useState("");
  const [flashState, SetFlashState] = useState(false);
  const [camera, SetCamera] = useState("");
  const [imageData, SetImageData] = useState("");
  const [stopRecording, SetStopRecording] = useState(false);
  const [isAllignment, SetIsAllignment] = useState(true);
  const [screenWidth, SetScreenWidth] = useState(SCREEN_WIDTH);

  const [counter, setCounter] = useState(0);
  const [showCounter, setShowCounter] = useState(false);
  const [intervals, setIntervals] = useState();
  const {
    title,
    stepStencilAssests,
    DocumentImageName,
    subTitle,
    totalSteps,
    points,
    image,
    titleHn,
    subTitleHn,
    TotalImage,
    currentIndex,
    retryCount,
    licensePlateNumber,
    activityTypeId,
    activityId,
    isLast,
  } = route.params;
  useEffect(
    () => {
      if (DeviceInfo.isEmulatorSync()) {
        Alert.alert(
          "Emulator detected!",
          "Camera capture/recording may not work"
        );
      }
      setUpdateIntervalForType(SensorTypes.accelerometer, 1000); // defaults to 100ms
      if (accelerometer) {
        accSubscription = accelerometer.subscribe(({ x, y, z, timestamp }) => {
          if (x >= -3.5 && z >= -5 && y <= 4.5 && y >= -4.5) {
            SetIsAllignment(true);
          } else {
            SetIsAllignment(true);
          }
        });
      }

      changeCameraState();
      let unsubscribe = navigation.addListener("focus", () => {
        Orientation.lockToLandscapeLeft();
      });

      // disabled back handler
      const backHandler = BackHandler.addEventListener(
        "hardwareBackPress",
        () => {
          return true;
        }
      );
      if (showCounter) {
        setCounter(0);
        if (iOS) {
          BackgroundTimer.start();
        }
        const interval = BackgroundTimer.setInterval(() => {
          let newCounter = counter + 0.25;
          if (newCounter < 0) {
            newCounter = 0;
          }
          setIntervals(interval);
          setCounter((counter) => counter + 0.25);
        }, 250);
        return () => BackgroundTimer.clearInterval(intervals);
      }
      return () => {
        unsubscribe();
        backHandler.remove();
        accSubscription && accSubscription.unsubscribe();
      };
    },
    [showCounter],
    []
  );

  useEffect(() => {
    if (counter == 60) {
      BackgroundTimer.clearInterval(intervals);
      setShowCounter(false);
      SetStopRecording(false);
    }
  }, [counter]);

  // for change camera
  const changeCameraState = () => {
    if (title == SELFI_IMAGE || titleHn == SELFI_IMAGE_HN) {
      SetCameraState(RNCamera.Constants.Type.front);
      SetStaincil(stepStencilAssests);
    } else {
      SetCameraState(RNCamera.Constants.Type.back);
      SetStaincil(stepStencilAssests);
    }
  };

  // take pic
  const takePicture = async function (camera) {
    const options = {
      quality: 0.2,
      base64: true,
      orientation: "landscapeLeft",
    };
    const data = await camera.takePictureAsync(options);
    // setting image data
    SetImageData(data);

    navigation.navigate("PreviewImage", {
      ImageData: data,
      ext: ".jpg",
      DocumentImageName,
      title,
      titleHn,
      subTitle,
      subTitleHn,
      totalSteps,
      stepStencilAssests,
      points,
      image,
      points,
      TotalImage,
      currentIndex,
      retryCount,
      licensePlateNumber,
      activityTypeId,
      activityId,
      isLast,
    });
  };

  //start recording
  const startRecording = async (camera) => {
    setShowCounter(true);
    console.log("recording sterted");
    SetStopRecording(true);
    // default to mp4 for android as codec is not set
    const options = {
      base64: true,
      maxDuration: 60,
      quality: "480p",
      videoBitrate: 64000 * 5,
    };
    camera
      .recordAsync(options)
      .then(({ uri, codec = "mp4" }) => {
        console.log("URI", uri);
        navigation.navigate("PreviewImage", {
          ImageData: uri,
          ext: ".mp4",
          DocumentImageName,
          title,
          subTitle,
          totalSteps,
          stepStencilAssests,
          points,
          image,
          points,
          TotalImage,
          currentIndex,
          retryCount,
          licensePlateNumber,
          activityTypeId,
          activityId,
          isLast,
        });
      })
      .catch((error) => {
        Alert.alert(error?.message);
      });
  };

  //Stop Recording
  const stopVideoRecording = (camera) => {
    setShowCounter(false);
    BackgroundTimer.clearInterval(intervals);
    console.log("Recording stops");
    camera.stopRecording();
    SetStopRecording(false);
  };

  // for torch
  const toggleTorch = () => {
    SetFlashState(!flashState);
  };
  const captureImage =
    title == VIDEO_TITLE || titleHn == VIDEO_TITLE_HN
      ? stopRecording
        ? stop_recording
        : start_recording
      : camera_shutter;
  return (
    <SafeAreaView
      edges={iOS ? ["top", "bottom", "right"] : []}
      style={styles.safeArea}
    >
      <View style={styles.container}>
        <StatusBar hidden={true} />
        {/* camera */}
        <View style={{ flex: 1 }}>
          <RNCamera
            style={styles.preview}
            type={cameraState}
            flashMode={
              flashState
                ? RNCamera.Constants.FlashMode.on
                : RNCamera.Constants.FlashMode.off
            }
            androidCameraPermissionOptions={{
              title: "Permission to use camera",
              message: "We need your permission to use your camera",
              buttonPositive: "Ok",
              buttonNegative: "Cancel",
            }}
            androidRecordAudioPermissionOptions={{
              title: "Permission to use audio recording",
              message: "We need your permission to use your audio",
              buttonPositive: "Ok",
              buttonNegative: "Cancel",
            }}
            // pausePreview={true}
            // pauseAfterCapture={true}
            autoFocus={true}
          >
            {({ camera, status, recordAudioPermissionStatus }) => {
              // if (status !== 'READY') return <PendingView />;
              {
                SetCamera(camera);
              }
              return (
                <View
                  style={{
                    flex: 1,
                    width: "95%",
                    height: "100%",
                    margin: 10,
                  }}
                >
                  {!isAllignment && (
                    <Text style={styles.landscapeTextStyle}>
                      {"Please align your device to landscape"}
                    </Text>
                  )}
                  <Image
                    source={left_top}
                    style={{
                      width: 50,
                      height: 50,
                      position: "absolute",
                      left: 1,
                      resizeMode: "contain",
                    }}
                  />
                  <Image
                    source={left_bottom}
                    style={{
                      width: 50,
                      height: 50,
                      position: "absolute",
                      left: 1,
                      bottom: 1,
                    }}
                  />
                  {console.log("COUNTER : ", counter)}
                  {showCounter && (
                    <ProgressBar
                      progress={counter / 75}
                      color={"#F5F5F5"}
                      style={styles.progressBarStyle}
                    />
                  )}
                  {showCounter && (
                    <Text style={styles.counterText}>
                      {((60.0 - counter) * -1)
                        .toString()
                        .substring(
                          0,
                          ((60.0 - counter) * -1).toString().indexOf(".")
                        )}
                    </Text>
                  )}
                  <Image
                    source={right_bottom}
                    style={{
                      width: 50,
                      height: 50,
                      position: "absolute",
                      right: 1,
                      bottom: 1,
                    }}
                  />
                  <Image
                    source={right_top}
                    style={{
                      width: 50,
                      height: 50,
                      position: "absolute",
                      right: 1,
                    }}
                  />
                  <Image
                    source={{ uri: stepStencilAssests }}
                    style={{
                      width: "100%",
                      height: "100%",
                      position: "absolute",
                      resizeMode: "contain",
                      alignSelf: "center",
                    }}
                  />
                </View>
              );
            }}
          </RNCamera>
        </View>
        {/* Button */}
        {isAllignment && (
          <View style={{ flex: 0.15, backgroundColor: "black" }}>
            <View
              style={{
                flex: 1,
                backgroundColor: "black",
                flexDirection: "column",
              }}
            >
              {/* <View style={{ flex: 0.4 }}> */}
              <TouchableOpacity
                onPress={() => {
                  toggleTorch();
                }}
                style={{
                  width: 30,
                  height: 30,
                  backgroundColor: "black",
                  resizeMode: "center",
                  marginTop: 32,
                  resizeMode: "contain",
                  flex: 1,
                  alignItems: "flex-start",
                  alignSelf: "center",
                }}
              >
                <Image
                  source={flashState ? flashOff : flashOn}
                  style={{
                    width: 30,
                    height: 30,
                    backgroundColor: "black",
                    marginTop: 32,
                    resizeMode: "contain",
                  }}
                />
              </TouchableOpacity>
              {/* </View>
          <View style={{ flex: 0.6 }}> */}
              <TouchableOpacity
                onPress={() => {
                  setCounter(0);
                  title == VIDEO_TITLE || titleHn == VIDEO_TITLE_HN
                    ? stopRecording == true
                      ? stopVideoRecording(camera)
                      : startRecording(camera)
                    : takePicture(camera);
                }}
                style={styles.capture}
              >
                <Image
                  source={captureImage}
                  style={{
                    width: 56,
                    height: 56,
                    backgroundColor: "black",
                    resizeMode: "contain",
                  }}
                />
              </TouchableOpacity>
              {/* </View> */}
            </View>
          </View>
        )}
      </View>
    </SafeAreaView>
  );
};
const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: Colors.darkBlack,
  },
  main: {
    flex: 1,
    flexDirection: "row",
  },
  productImageView: {
    flex: 0.475,
  },
  blankView: {
    flex: 0.05,
  },
  productInfoView: {
    flex: 0.475,
    marginRight: 16,
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
  },
  headerView: {
    backgroundColor: "#C6AFFF",
    height: 40,
    justifyContent: "center",
  },
  headerText: {
    marginLeft: 16,
    fontSize: 20,
    fontFamily: "Muli-Black",
  },
  productImageStyle: {
    marginTop: 8,
    marginLeft: 16,
    marginBottom: 40,
    height: SCREEN_HEIGHT - 70,
  },
  backButtonImageStyle: {
    marginLeft: 32,
    height: 24,
    width: 24,
    backgroundColor: "red",
  },
  subHeaderText: {
    fontFamily: "Mulli-Regular",
    fontSize: 16,
    marginLeft: 16,
  },
  instructionText: {
    fontFamily: "Mulli-Regular",
    fontSize: 16,
    marginLeft: 16,
    marginBottom: 20,
  },
  captureImageButtonView: {
    height: 48,
    borderRadius: 4,
    backgroundColor: Colors.digitYellow,
    marginTop: 2,
    flexDirection: "row",
    justifyContent: "center",
  },
  captureImageButtonText: {
    fontSize: 16,
    fontFamily: "Muli-Black",
    alignSelf: "center",
  },
  container: {
    flex: 1,
    flexDirection: "row",
    // backgroundColor: 'black',
  },
  preview: {
    flex: 1,
    justifyContent: "flex-end",
    alignItems: "center",
  },
  capture: {
    flex: 1,
    alignItems: "flex-start",
    alignSelf: "center",
    justifyContent: "flex-start",
  },
  flash: {
    flex: 0,
    backgroundColor: "#fff",
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: "flex-end",
    margin: 20,
    position: "absolute",
  },
  previewImageStyle: {
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
  },
  dateAndTimeText: {
    position: "absolute",
    fontSize: 20,
    color: Colors.digitYellow,
    left: 1,
    bottom: 1,
  },
  previewImageIconMainView: {
    flex: 0.05,
    backgroundColor: "black",
  },
  tickMarkImageView: {
    flex: 0.6,
    justifyContent: "flex-end",
  },
  tickMarkImageStyle: {
    width: 30,
    height: 30,
    backgroundColor: "white",
    alignContent: "flex-end",
    marginBottom: 20,
  },
  crossImageView: {
    flex: 0.4,
    justifyContent: "flex-end",
    marginBottom: 20,
  },
  crossImageStyle: {
    width: 30,
    height: 30,
    backgroundColor: "white",
    alignContent: "flex-end",
  },
  cameraIconView: {
    flexDirection: "row",
    justifyContent: "center",
    width: SCREEN_WIDTH,
    position: "absolute",
  },
  infoScrollView: {
    marginTop: 40,
    height: SCREEN_HEIGHT - 200,
  },
  subHeaderTextView: {
    height: 40,
    marginTop: 8,
  },
  backButtonImageView: {
    backgroundColor: "#C6AFFF",
    height: 40,
    justifyContent: "center",
    marginLeft: 16,
  },
  latLongText: {
    position: "absolute",
    fontSize: 20,
    color: Colors.digitYellow,
    left: 1,
  },
  digitEdgeText: {
    position: "absolute",
    fontSize: 20,
    color: Colors.digitYellow,
    right: 1,
  },
  landscapeTextStyle: {
    width: "100%",
    position: "absolute",
    height: "100%",
    alignSelf: "center",
    textAlignVertical: "center",
    textAlign: "center",
    color: Colors.digitYellow,
    fontFamily: "Muli-ExtraBold",
    fontSize: 22,
  },
  progressBarStyle: {
    borderRadius: 6,
    backgroundColor: "#FFBB00",
    position: "absolute",
    width: "80%",
    marginTop: 2,
    height: 8,
    alignSelf: "center",
  },
  counterText: {
    width: "100%",
    position: "absolute",
    height: "100%",
    alignSelf: "center",
    textAlignVertical: "top",
    textAlign: "right",
    color: Colors.digitYellow,
    fontFamily: "Muli-ExtraBold",
    marginTop: 10,
    marginLeft: "45%",
  },
});
export default Camera;
