import {
  View,
  Text,
  StyleSheet,
  Image,
  BackHandler,
  Platform,
} from "react-native";
import React, { useState } from "react";
import Modal from "react-native-modal";
import { getMaxWidth, getMinWidth, getOrientation } from "./scaling";
import style from "../../../../Components/common/CommonStyle";
import { PrimaryButton } from "../../../../Components/common/ThemedComponents";
import { useDispatch, useSelector } from "react-redux";
import store from "react-native-digitcamera/src/redux/store";
import Database from "../../../../Components/common/DAsyncStorage";
import { useNavigation } from "@react-navigation/core";
import { startOfflineBackgroundUpload } from "react-native-digitcamera/src/Screens/SilentUpload/SilentUploadUtils";

const SCREEN_HEIGHT = getMaxWidth();
const SCREEN_HEIGHT_LANDSCAPE = getMinWidth();

const ModalContentLandscape = () => {
  return (
    <View style={styles.modalContentView}>
      <Text style={styles.modalContentHeaderTitle}>
        Something went wrong please try again Landscape
      </Text>
    </View>
  );
};

const DocumentUploadPending = (props) => {
  const { navigation } = props;

  return (
    <View style={styles.modalContentView}>
      <Text style={styles.modalContentHeaderTitle}>
        Pending vehicle details found!
      </Text>
      <View style={styles.modalContentButtonView}>
        <Image
          source={{
            uri: "https://d2h44aw7l5xdvz.cloudfront.net/assets/gif/cycle.gif",
            cache: "only-if-cached",
          }}
          style={{
            height: SCREEN_HEIGHT * 0.35,
            resizeMode: "contain",
            aspectRatio: 1,
            alignSelf: "center",
            //   backgroundColor: "red",
            marginLeft: 10,
          }}
        />
        <Text style={styles.modalContentHeaderSubtitle}>
          We are uploading the data in the background you can close the app and
          can continue using your phone
        </Text>

        <PrimaryButton
          onPress={async () => {
            hideModal();
            // await startOfflineBackgroundUpload();
            navigation.navigate("VideoPIProgress");
          }}
          style={{ marginTop: 20 }}
        >
          Okay
        </PrimaryButton>
      </View>
    </View>
  );
};

const DocumentUploadError = ({ navigation }) => {
  const dispatch = useDispatch();
  const orientation = getOrientation();
  if (orientation === "LANDSCAPE") {
    return (
      <View
        style={[
          styles.modalContentView,
          {
            height: SCREEN_HEIGHT_LANDSCAPE * 0.8,
            flexDirection: "row",
            justifyContent: "space-evenly",
          },
        ]}
      >
        <View>
          <Image
            source={{
              uri: "https://d2h44aw7l5xdvz.cloudfront.net/CRM/PRM/oops_something_went_wrong.png",
              cache: "only-if-cached",
            }}
            resizeMode="contain"
            style={{
              width: SCREEN_HEIGHT_LANDSCAPE * 0.7,
              height: SCREEN_HEIGHT_LANDSCAPE * 0.7,
            }}
          />
        </View>
        <View
          style={{
            justifyContent: "space-between",
            marginVertical: 20,
          }}
        >
          <View>
            <Text
              style={[styles.modalContentHeaderTitle, { textAlign: "left" }]}
            >
              Oops!
            </Text>
            <Text
              style={[styles.modalContentHeaderSubtitle, { marginTop: 20 }]}
            >
              Something went wrong, please try again later
            </Text>
          </View>

          <PrimaryButton
            onPress={async () => {
              hideModal();
              navigation.navigate("WithQuote");
            }}
            style={{ width: "100%", alignSelf: "center" }}
          >
            Okay
          </PrimaryButton>
        </View>
      </View>
    );
  } else {
    return (
      <View
        style={[
          styles.modalContentView,
          { height: SCREEN_HEIGHT * 0.6, justifyContent: "space-between" },
        ]}
      >
        <Text style={[styles.modalContentHeaderTitle, { textAlign: "left" }]}>
          Oops!
        </Text>
        <View style={{}}>
          <Image
            source={{
              uri: "https://d2h44aw7l5xdvz.cloudfront.net/CRM/PRM/oops_something_went_wrong.png",
              cache: "only-if-cached",
            }}
            resizeMode="contain"
            style={{
              width: SCREEN_HEIGHT * 0.4,
              height: SCREEN_HEIGHT / 3,
            }}
          />
        </View>
        <Text style={styles.modalContentHeaderSubtitle}>
          Something went wrong, please try again later
        </Text>
        <View style={styles.modalContentButtonView}>
          <PrimaryButton
            onPress={async () => {
              hideModal();
              await Database.set("PIOnProgress", "false");
              navigation.navigate("WithQuote");
            }}
            style={{ marginTop: 20, width: "40%", alignSelf: "center" }}
          >
            Okay
          </PrimaryButton>
        </View>
      </View>
    );
  }
};

const no_internet = require("../common/Image/no_internet.png");

const NoInternetAccess = ({ navigation, customDescription }) => {
  const dispatch = useDispatch();
  const orientation = getOrientation();
  if (orientation === "LANDSCAPE") {
    return (
      <View
        style={[
          styles.modalContentView,
          {
            height: SCREEN_HEIGHT_LANDSCAPE * 0.8,
            flexDirection: "row",
            justifyContent: "space-evenly",
          },
        ]}
      >
        <View>
          <Image
            source={no_internet}
            resizeMode="contain"
            style={{
              width: SCREEN_HEIGHT_LANDSCAPE * 0.7,
              height: SCREEN_HEIGHT_LANDSCAPE * 0.7,
            }}
          />
        </View>
        <View
          style={{
            justifyContent: "space-between",
            marginVertical: 20,
          }}
        >
          <View>
            <Text
              style={[styles.modalContentHeaderTitle, { textAlign: "left" }]}
            >
              No Internet Connection
            </Text>
            <Text
              style={[styles.modalContentHeaderSubtitle, { marginTop: 20 }]}
            >
              {customDescription}
            </Text>
          </View>

          <PrimaryButton
            onPress={async () => {
              hideModal();
              navigation.navigate("WithQuote");
            }}
            style={{ width: "100%", alignSelf: "center" }}
          >
            Okay
          </PrimaryButton>
        </View>
      </View>
    );
  } else {
    return (
      <View
        style={[
          styles.modalContentView,
          { height: SCREEN_HEIGHT * 0.6, justifyContent: "space-between" },
        ]}
      >
        <Text style={[styles.modalContentHeaderTitle, { textAlign: "left" }]}>
          No Internet Connection
        </Text>
        <View style={{}}>
          <Image
            source={no_internet}
            resizeMode="contain"
            style={{
              // resizeMode: "center",
              width: SCREEN_HEIGHT * 0.4,
              alignItems: "center",
              height: SCREEN_HEIGHT / 3,
              alignSelf: "center",
            }}
          />
        </View>
        <Text style={styles.modalContentHeaderSubtitle}>
          {customDescription}
        </Text>
        <View style={styles.modalContentButtonView}>
          <PrimaryButton
            onPress={async () => {
              hideModal();
              await Database.set("PIOnProgress", "false");
              navigation.navigate("WithQuote");
            }}
            style={{ marginTop: 20, width: "40%", alignSelf: "center" }}
          >
            Okay
          </PrimaryButton>
        </View>
      </View>
    );
  }
};

const ServerErrorModal = ({ navigation, customDescription }) => {
  return (
    <View
      style={[
        styles.modalContentView,
        { height: SCREEN_HEIGHT * 0.3, justifyContent: "space-between" },
      ]}
    >
      <Text
        style={[
          styles.modalContentHeaderTitle,
          { textAlign: "center", fontSize: 22 },
        ]}
      >
        Alert
      </Text>

      <Text style={styles.modalContentHeaderSubtitle}>{customDescription}</Text>
      <View style={styles.modalContentButtonView}>
        <PrimaryButton
          onPress={() => {
            hideModal();
            navigation.navigate("WithQuote");
          }}
          style={{ marginTop: 20, width: "40%", alignSelf: "center" }}
        >
          Okay
        </PrimaryButton>
      </View>
    </View>
  );
};

const hideModal = () => {
  store.dispatch({
    type: "GLOBAL_MODAL_HIDE",
  });
};

export const NamedModal = {
  DOCUMENT_UPLOAD_ERROR: "DOCUMENT_UPLOAD_ERROR",
  DOCUMENT_UPLOAD_PENDING: "DOCUMENT_UPLOAD_PENDING",
  NO_INTERNET_ACCESS: "NO_INTERNET_ACCESS",
  NO_INTERNET_ACCESS_UPLOADING: "NO_INTERNET_ACCESS_UPLOADING",
  MANUAL_INSPECTION: "MANUAL_INSPECTION",
};

const DESCRIPTION = {
  NO_INTERNET_ACCESS_UPLOADING:
    "We’ll resume upload when network connection is back.",
  NO_INTERNET_ACCESS: "Please recheck your internet connection and try again.",
  MANUAL_INSPECTION:
    "This make and model requires a manual inspection. We request you to reach out to your agent or Digit team at hello@godigit.com",
};

const returnNamedModal = (namedModal, navigation) => {
  switch (namedModal) {
    case NamedModal.DOCUMENT_UPLOAD_ERROR:
      return <DocumentUploadError navigation={navigation} />;
    case NamedModal.DOCUMENT_UPLOAD_PENDING:
      return <DocumentUploadPending navigation={navigation} />;
    case NamedModal.NO_INTERNET_ACCESS_UPLOADING:
      return (
        <NoInternetAccess
          navigation={navigation}
          customDescription={DESCRIPTION.NO_INTERNET_ACCESS_UPLOADING}
        />
      );
    case NamedModal.NO_INTERNET_ACCESS:
      return (
        <NoInternetAccess
          navigation={navigation}
          customDescription={DESCRIPTION.NO_INTERNET_ACCESS}
        />
      );
    case NamedModal.MANUAL_INSPECTION:
      return (
        <ServerErrorModal
          navigation={navigation}
          customDescription={DESCRIPTION.MANUAL_INSPECTION}
        />
      );
    default:
      return <DocumentUploadPending navigation={navigation} />;
  }
};

const GlobalModal = (children) => {
  const navigation = useNavigation();
  const { isVisible, modalName } = useSelector((state) => state.globalModal);
  return (
    <Modal
      testID={"modal"}
      isVisible={isVisible}
      style={styles.view}
      statusBarTranslucent
    >
      {returnNamedModal(modalName, navigation)}
    </Modal>
  );
};

export default GlobalModal;

const styles = StyleSheet.create({
  view: {
    justifyContent: "flex-end",
    margin: 0,
  },
  modalContentView: {
    height: SCREEN_HEIGHT * 0.6,
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
    backgroundColor: "#FFFFFF",
    padding: 16,
  },
  modalContentHeaderTitle: {
    ...style.muliBoldDB,
    fontSize: 18,
    textAlign: "center",
  },
  modalContentHeaderSubtitle: {
    ...style.muliRegDB,
    fontSize: 16,
    textAlign: "center",
  },
});
