import {
  StyleSheet,
  Text,
  View,
  Platform,
  FlatList,
  BackHandler,
} from "react-native";
import React, { useEffect, useRef, useState } from "react";
// import Header from "../common/Header";
import Header from "react-native-digitcamera/src/Screens/Header";
// import { translate } from "react-native-digitcamera/src/common/localize/i18n";
import Orientation from "react-native-orientation";
import { ScrollView } from "react-native-gesture-handler";
import Colors from "react-native-digitcamera/src/common/Colors";
import { PrimaryButton } from "../common/ThemedComponents";
import { SCREEN_HEIGHT } from "../common/Constants";
import MIcon from "react-native-vector-icons/MaterialIcons";
import MCIcon from "react-native-vector-icons/MaterialCommunityIcons";
import EIcon from "react-native-vector-icons/Entypo";

import style from "../common/CommonStyle";
import Database from "../common/DAsyncStorage";
import { SafeAreaView } from "react-native-safe-area-context";

const translate = (str) => str;

const iOS = Platform.OS === "ios";
const ConsentData = [
  {
    icon: <MCIcon name="camera" size={24} color={Colors.darkBlack} />,
    name: "Camera",
  },
  {
    icon: <MCIcon name="microphone" size={24} color={Colors.darkBlack} />,
    name: "Microphone",
  },
  {
    icon: <MIcon name="storage" size={24} color={Colors.darkBlack} />,
    name: "Storage",
  },
  {
    icon: <MIcon name="location-on" size={24} color={Colors.darkBlack} />,
    name: "Location",
  },
  {
    icon: <MCIcon name="run" size={24} color={Colors.darkBlack} />,
    name: "Sensors",
  },
  {
    icon: <EIcon name="video-camera" size={24} color={Colors.darkBlack} />,
    name: "Screen Recording",
  },
];

const Consent = ({ navigation, route }) => {
  const [, updateState] = React.useState();
  const forceUpdate = React.useCallback(() => updateState({}), []);
  useEffect(() => {
    if (!iOS) {
      const Immersive = require("react-native-immersive").Immersive;
      Immersive.setImmersive(false);
    }
    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      () => {
        return true;
      }
    );

    Orientation.lockToPortrait();

    return () => {
      backHandler.remove();
    };
  }, []);
  //to get activity id and activityTypeid

  const renderItem = ({ item, index }) => {
    return (
      <View
        style={{
          flexDirection: "row",
          marginVertical: 8,
          alignItems: "center",
        }}
      >
        <View style={styles.iconView}>{item.icon}</View>
        <View style={styles.nameView}>
          <Text style={styles.ConsentNameStyle}>{item.name}</Text>
        </View>
      </View>
    );
  };

  const clearVehicleSchema = () => {
    console.log("^^^^ Clearing vehicle data ^^^^");
    Database.remove("PIVechicleData");
  };

  const handleLetsBegin = async () => {
    var AppLoginStatus = await Database.get("AppLoginStatus");
    const USERTYPE = AppLoginStatus?.userType;
    console.log("^^^ CONSENT -> USERTYPE ^^^^", USERTYPE);
    if (USERTYPE === "OEMDealer") {
      clearVehicleSchema();
      navigation.navigate("VehicleInspection");
    } else if (USERTYPE === "Customer" || USERTYPE === "DealerOrAgent") {
      navigation.navigate("PILibrary");
    }
  };
  return (
    <SafeAreaView
      edges={iOS ? ["top", "bottom", "right"] : []}
      style={styles.safeArea}
    >
      <ScrollView
        style={{ backgroundColor: Colors.white }}
        keyboardShouldPersistTaps={iOS ? "always" : "handled"}
        keyboardDismissMode="on-drag"
        contentContainerStyle={{ flex: 1 }}
      >
        <View style={styles.main}>
          <View style={styles.subView}>
            <Header
              showTitle={translate("Consent")}
              hideArrowBackButton={true}
              onlanguagechange={() => {
                forceUpdate();
              }}
              shiftTitleToLeft={true}
              titleStyle={{ fontSize: 20 }}
            />
            {/* Title and subtitle */}
            <View style={styles.HeadingView}>
              <Text style={styles.headingText}>
                {translate("Need your consent to go ahead")}
              </Text>
              <Text style={styles.subText}>
                {translate(
                  "To ensure a smooth inspection experience, please give us access to your phone's:"
                )}
              </Text>
            </View>
            {/* Points */}
            <View style={styles.pointsView}>
              <View>
                <FlatList
                  data={ConsentData}
                  keyExtractor={(item, index) => index.toString()}
                  renderItem={renderItem}
                  maxToRenderPerBatch={100}
                  updateCellsBatchingPeriod={1000}
                />
              </View>
              <Text
                style={[styles.subText, { marginTop: 16 }, style.muliBoldDB]}
              >
                {translate("Rest assured - your information is safe with us!")}
              </Text>
            </View>
            {/* Button */}
            <View style={styles.buttonView}>
              <PrimaryButton onPress={handleLetsBegin}>
                {translate("Let’s Begin")}
              </PrimaryButton>
            </View>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};
export default Consent;

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: "white",
  },
  main: {
    flex: 1,
    backgroundColor: "#FFFFFF",
  },
  imageView: {
    flex: 0.4,
    justifyContent: "center",
    alignItems: "center",
    // marginTop: 50,
  },
  textView: {
    flex: 0.45,
  },
  buttonView: {
    paddingTop: 5,
    flexDirection: "column",
    justifyContent: "center",
  },
  welcomeText: {
    fontSize: 18,
    fontFamily: "Muli-ExtraBold",
    marginBottom: 9,
    marginTop: 52,
  },
  subText: {
    fontFamily: "Muli-Regular",
    fontSize: 16,
    marginTop: 8,
  },
  subView: {
    flex: 1,
    marginLeft: 16,
    marginRight: 16,
  },
  HeadingView: {
    marginTop: 20,
  },
  pointsView: {},
  headingText: {
    fontFamily: "Muli-Regular",
    fontSize: 20,
    fontWeight: "700",
  },
  iconView: {
    flex: 0.1,
  },
  nameView: {
    flex: 0.8,
  },
  ConsentNameStyle: {
    fontFamily: "Muli-Regular",
    fontSize: 14,
    fontWeight: "700",
  },
});
