import { SCREEN_HEIGHT, SCREEN_WIDTH } from "./Constants";
// import Orientation from 'react-native-orientation';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  StatusBar,
  FlatList,
} from "react-native";
import React, { Component } from "react";
import { Image } from "react-native";
import Colors from "./Colors";
import { RNCamera } from "react-native-camera";
import Icon from "react-native-vector-icons/FontAwesome";
// import moment from "react-moment";
import Geolocation from "@react-native-community/geolocation";
import Marker from "react-native-image-marker";
import * as Progress from "react-native-progress";
import { connect } from "react-redux";

const crossMark = require("./Image/crossMark.png");
const tickMark = require("./Image/tickMark.png");

class DocumentUpload extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isDisplayQuoteInstruction: true,
      isWithQuote: true,
      isWithOutQuote: false,
      isDisplayInstruction: false,
      torchon: "",
      isDisplayCameraPreview: false,
      isDisplayCamera: false,
      localPath: "",
      flashState: true, //for flash
      dateAndTime: "", //date and time
      currentLongitude: "unknown", //Initial Longitude
      currentLatitude: "unknown", //Initial Latitude
      isDisplayVideoRecorder: false,
      instructionData: "",
      fullDataSource: "",
      assets: "",
      header: "",
      count: 0,
      dataSource: "",
      cameraState: "",
      buttonText: "",
      skipdata: "",
      isBackButtonPressed: false,
      isSkipButtonPressed: false,
      extention: "",
      screenShotPath: "",
      isDisplayUploadDocument: false,
      documentUploadPercentage: 0,
      odometerReading: "",
      ANDROID_ID: "",
      CurrentDate: "",
      showError: false,
      isLoading: true,
      registrationNumber: "",
      isSelected: false,
      isFocused: false,
    };
  }

  // _orientationDidChange = (orientation) => {
  //     if (orientation === 'LANDSCAPE') {
  //         // do something with landscape layoutr
  //         SCREEN_HEIGHT = Math.round(Dimensions.get('window').height)
  //         SCREEN_WIDTH = Math.round(Dimensions.get('window').width)

  //     } else {
  //         // do something with portrait layout
  //         SCREEN_HEIGHT = Math.round(Dimensions.get('window').width)
  //         SCREEN_WIDTH = Math.round(Dimensions.get('window').height)
  //     }
  // }

  uploadedDocumentStatus(item) {
    return (
      <View>
        {console.log("HHHHHHHHHHHHHHHHH" + item.imagePath)}
        <View
          style={{
            margin: 16,
            width: SCREEN_HEIGHT,
            height: SCREEN_WIDTH / 8.5,
            flexDirection: "row",
          }}
        >
          <View style={{ flex: 0.2 }}>
            {this.uploadedDocumentImageOrVideo(item)}
          </View>
          <View style={{ flex: 0.03, justifyContent: "center" }}></View>
          <View style={{ flex: 0.77 }}>
            <View style={{ flex: 0.45, justifyContent: "center" }}>
              <Text>{item.stepTitle}</Text>
            </View>
            <View style={{ flex: 0.15, justifyContent: "center" }}>
              <Text>{(item.imageSize / 1024).toString().split(".")[0]} KB</Text>
            </View>
            <View style={{ flex: 0.15, justifyContent: "center" }}>
              <Progress.Bar
                progress={item.upLoadStatus}
                width={SCREEN_HEIGHT / 1.5}
                color={Colors.digitYellow}
                height={2}
                borderColor={"white"}
              />
            </View>

            <View style={{ flex: 0.25, justifyContent: "center" }}>
              <Text style={{ color: Colors.digitYellow }}>
                {item.upLoadStatus * 100} % Completed
              </Text>
            </View>
          </View>
        </View>
        <View
          style={{
            borderRadius: 1,
            width: SCREEN_WIDTH,
            height: 1,
            borderWidth: 0.5,
            color: Colors.borderBlack,
          }}
        ></View>
      </View>
    );
  }
  //Checking the document image or Video
  uploadedDocumentImageOrVideo(item) {
    const type = item.imagePath.split(".");
    if (type[3] == "mp4") {
      return (
        <VideoPlayer
          video={{ uri: item.imagePath }}
          pauseOnPress={true}
          autoplay={true}
          disableSeek={true}
          style={{ flex: 1, resizeMode: "contain" }}
        ></VideoPlayer>
      );
    } else {
      return (
        <Image
          source={{ uri: item.imagePath }}
          resizeMethod="auto"
          resizeMode="contain"
          style={{ flex: 1, resizeMode: "contain" }}
        />
      );
    }
  }
  render() {
    // do something
    // Orientation.lockToPortrait()
    // Orientation.addOrientationListener(this._orientationDidChange);
    // console.log("Lenght!!!!!!!!!!!!!!!!!!!!!!!!!!!!" + this.state.upLoadIamgeDataSource)
    console.log(
      "SSSSSSSSSSSSSSSSSSSSSSSS" +
        JSON.stringify(this.props.UploadImageData.uploadImageDatasource)
    );
    // const dataSource=[]
    // this.props.UploadImageData.uploadImageDatasource.map(item=>{
    //     dataSource.push(item)
    //     console.log(dataSource.length)
    // })
    return (
      <View>
        <StatusBar hidden={true} />
        <View style={styles.documentProcessView}>
          <Text style={styles.documentProcessHeader}>
            Document being processd!
          </Text>
        </View>
        <View style={{ width: SCREEN_WIDTH, height: SCREEN_WIDTH }}>
          <FlatList
            data={this.props.UploadImageData.uploadImageDatasource}
            keyExtractor={(item, index) => item.index}
            renderItem={({ item }) => (
              <View>{this.uploadedDocumentStatus(item)}</View>
            )}
            maxToRenderPerBatch={100}
            updateCellsBatchingPeriod={1000}
            style={{
              backgroundColor: "white",
              marginBottom: 40,
              fontFamily: "Mulli-Regular",
            }}
          />
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  main: {
    flex: 1,
    flexDirection: "row",
    backgroundColor: "#FFFFFF",
  },
  productImageView: {
    flex: 0.475,
  },
  blankView: {
    flex: 0.05,
  },
  productInfoView: {
    flex: 0.475,
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
  },
  headerView: {
    backgroundColor: "#F5F5F5",
    height: 60,
    justifyContent: "center",
  },
  headerText: {
    marginLeft: 16,
    fontSize: 16,
    fontFamily: "Muli-Black",
    marginRight: 16,
  },
  documentProcessHeader: {
    marginLeft: 16,
    fontSize: 26,
    fontFamily: "Muli-Black",
    marginRight: 16,
    justifyContent: "center",
  },
  documentProcessView: {
    width: SCREEN_WIDTH,
    height: 60,
    justifyContent: "center",
    backgroundColor: "#F5F5F5",
  },
  productImageStyle: {
    marginTop: 8,
    marginLeft: 16,
    marginBottom: 40,
    height: SCREEN_HEIGHT - 70,
  },
  backButtonImageStyle: {
    marginLeft: 32,
    height: 30,
    width: 40,
    backgroundColor: "red",
  },
  subHeaderText: {
    fontFamily: "Mulli-Regular",
    fontSize: 16,
    marginLeft: 16,
    marginRight: 16,
  },
  instructionText: {
    fontFamily: "Mulli-Regular",
    fontSize: 16,
    marginLeft: 32,
    marginBottom: 20,
    marginRight: 16,
  },
  captureImageButtonView: {
    height: 48,
    borderRadius: 4,
    backgroundColor: Colors.digitYellow,
    marginTop: 2,
    flexDirection: "row",
    justifyContent: "center",
    marginRight: 16,
  },
  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: 0,
    backgroundColor: "#fff",
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: "flex-end",
    margin: 20,
    position: "absolute",
  },
  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,
    resizeMode: "contain",
  },
  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",
    alignSelf: "center",
    marginBottom: 20,
  },
  crossImageView: {
    flex: 0.4,
    justifyContent: "flex-end",
    marginBottom: 20,
  },
  crossImageStyle: {
    width: 30,
    height: 30,
    backgroundColor: "white",
    alignSelf: "center",
  },
  cameraIconView: {
    flexDirection: "row",
    justifyContent: "center",
    width: SCREEN_WIDTH,
    position: "absolute",
  },
  infoScrollView: {
    marginTop: 40,
    height: SCREEN_HEIGHT - 220,
  },
  subHeaderTextView: {
    height: 40,
    marginTop: 8,
  },
  backButtonImageView: {
    backgroundColor: "#F5F5F5",
    height: 60,
    justifyContent: "center",
  },
  latLongText: {
    position: "absolute",
    fontSize: 20,
    color: Colors.digitYellow,
    left: 1,
  },
  digitEdgeText: {
    position: "absolute",
    fontSize: 20,
    color: Colors.digitYellow,
    right: 1,
  },
  odometerText: {
    fontSize: 16,
    fontFamily: "Muli-Black",
    marginLeft: 16,
  },
  odometerInputText: {
    fontSize: 16,
    fontFamily: "Muli-Black",
    borderRadius: 4,
    borderColor: Colors.digitYellow,
    borderWidth: 1,
    marginTop: 5,
    marginRight: 16,
    marginBottom: 5,
  },
  infoScrollViewWithTextInput: {
    height: SCREEN_HEIGHT - 270,
  },
  // productImageView: {
  //     flexDirection: 'row',
  //     justifyContent: 'center'
  // },
  // productImage: {
  //     width: 50,
  //     height: 50,
  //     marginTop: 16,
  //     flexDirection: 'row',
  //     justifyContent: 'space-around',
  //     marginLeft: 16,
  //     marginRight: 16
  // },
});
//Redux Action
const mapDispatchToProps = (dispatch) => {
  return {
    // addUploadImageDatasource: uploadImageDatasource => dispatch(addUploadImageDatasource(uploadImageDatasource)),
  };
};

//Redux State
const mapReductStateToProps = (reduxState) => {
  const { UploadImageData } = reduxState;
  return { UploadImageData };
};

export default connect(
  mapReductStateToProps,
  mapDispatchToProps
)(DocumentUpload);
