import {
  Alert,
  Image,
  StyleSheet,
  Text,
  View,
  KeyboardAvoidingView,
  BackHandler,
  Platform,
  AppState,
} from "react-native";
import React, { useEffect, useMemo, useRef, useState } from "react";
import Header from "../Screens/Header";
import { translate } from "react-native-digitcamera/src/common/localize/i18n";
import Orientation from "../../../react-native-orientation";
import {
  TextInput,
  PrimaryButton,
  NewRoundButton,
  Spinner,
  NewRadioButton,
} from "../common/ThemedComponents";
import { renderErrorMsge } from "react-native-digitcamera/src/common/Validation";
import { ScrollView } from "react-native-gesture-handler";

import { getActivityid } from "react-native-digitcamera/src/common/Services/getActivityid";
import { useDispatch } from "react-redux";
import Modal from "../common/Modal";
import Database from "../../../../Components/common/DAsyncStorage";
import {
  isCVFlow,
  POLICY_NUMBER_REGX,
  SCREEN_HEIGHT,
  SCREEN_WIDTH,
} from "react-native-digitcamera/src/common/Constants";
import {
  firebaseAttributes,
  errorRecord,
  firebaseEvents,
} from "../common/libEventLog/libCrashlytics/libCrashlyticsEvent";
import analytics from "@react-native-firebase/analytics";
import Colors from "react-native-digitcamera/src/common/Colors";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
import MIcon from "react-native-vector-icons/MaterialIcons";
import { ACTIVITY_TYPE_MOTOR_4W_OD_NB_PRE_INSPECTION_SELF_SURVEY } from "../common/Constants";

import NetInfo from "@react-native-community/netinfo";
import UploadFile from "react-native-digitcamera/src/Screens/UploadFile";
import ProductCard from "react-native-digitcamera/src/common/ProductCard";
import {
  UELogEvent,
  UELogMessage,
} from "../common/libEventLog/UserExperior/LibUserExperior";
import style from "../../../../Components/common/CommonStyle";
import { useIsAppForeground } from "../common/useIsForeground";
import {
  checkInternetSpeed,
  getUserType,
  offlinePIDataToRealm,
  updateStatusRealm,
} from "react-native-digitcamera/src/Screens/OfflineFlow/CommonFunc";
import { NamedModal } from "react-native-digitcamera/src/common/GlobalModal";
import { useIsFocused } from "@react-navigation/native";
import AsyncStorage from "@react-native-async-storage/async-storage";

var PICompleteStatus;
var vechicleData;
const iOS = Platform.OS === "ios";

const girl_selfi = require("../common/Image/girl_selfi.png");
const car = require("../common/Image/new/four_wheeler.png");
const Bike = require("../common/Image/new/two_wheeler.png");
const cv = require("../common/Image/new/cv.png");
var sensorImageDetails = [];
const WithQuote = ({ navigation, route }) => {
  const isForeground = useIsAppForeground();
  const focused = useIsFocused();

  const [quoteNumber, setQuoteNumber] = useState("");
  const [isLoading, setISsLoading] = useState(false);
  const [isPIModalVisible, setisPIModalVisible] = useState(false);
  const [, updateState] = React.useState();
  const forceUpdate = React.useCallback(() => updateState({}), []);

  const [_4Wclicked, set4wclicked] = useState(false);
  const [_2Wclicked, set2wclicked] = useState(false);
  const [cvclicked, setCVclicked] = useState(false);

  const [showOfflineModal, setShowOfflineModal] = useState(false);
  const [isNetworkAvailable, setIsNetworkAvailable] = useState(true);
  const [isVechicleTypeSelected, setIsVechicleTypeSelected] = useState(false);
  const [activityTypeId, setActivityTypeId] = useState(0);
  const [vechicleType, setVechicleType] = useState("");
  const [selected, setSelected] = useState("");

  const [checked, setChecked] = useState("");

  var registrationNumber;
  const [wrongQuoteModalVisible, setWrongQuoteModalVisible] = useState(false);
  const dispatch = useDispatch();
  const { agentEmail, agentName, agentMobile, toWithQuote, toTutorial } =
    route.params;

  var activityData;
  var instruction;
  var inProgressArray = [];
  var completedArray = [];

  useEffect(() => {
    var unsubscribe;
    var unsubscribeNetInfo;
    const asyncLogic = async () => {
      // await Database.remove("PIMediaStatus");
      // console.log("props.isShowActivityScreen ", isShowActivityScreen);
      validateIsFromLink();
      if (!iOS) {
        const Immersive = require("react-native-immersive").Immersive;
        Immersive.setImmersive(false);
      }
      getDataFromDb();
      unsubscribe = navigation.addListener("focus", () => {
        if (!iOS) {
          const Immersive = require("react-native-immersive").Immersive;
          Immersive.setImmersive(false);
        }
        // this flow will excute only when app is not loging and user come through otp validation screen
        // if user come through the link then we are storing the flag in APP's App.js from their according to flag we are navigating to the screen
        // if (isFromLink) {
        //   navigation.navigate("Toturial");
        // }
        Orientation.lockToPortrait();
      });
      unsubscribeNetInfo = NetInfo.addEventListener(async (state) => {
        console.log("In NetInfo withQuote");
        if (state.isInternetReachable != null) {
          if (state.isInternetReachable && (await checkInternetSpeed())) {
            setIsNetworkAvailable(true);
          } else {
            setIsNetworkAvailable(false);
            UELogEvent("Offline Flow : withQuote.js", {
              mode: "offline",
            });
          }
        }
      });
    };
    asyncLogic();
    return () => {
      unsubscribeNetInfo && unsubscribeNetInfo();
      unsubscribe && unsubscribe();
    };

    // if (mediaStatusArray.) {
    // }
    /****** else ******/
  }, [focused]);

  const validateIsFromLink = async () => {
    var PIDeeplink = await Database.get("PIDeeplink");
    var PIVechicleData = await Database.get("PIVechicleData");

    var isFromLink = PIDeeplink.isFromLink;
    console.log(
      "validateIsFromLink  >>> from withQuote.js isFromLink ",
      isFromLink
    );
    if (isFromLink) {
      navigation.navigate("Toturial", {
        activityId: PIVechicleData?.activityId,
        activityTypeId: PIVechicleData?.activityTypeId,
        licensePlateNumber: PIVechicleData?.licensePlateNumber,
      });
    }
  };

  const getDataFromDb = async () => {
    PICompleteStatus = await Database.get("PICompleteStatus");
    vechicleData = await Database.get("PIVechicleData");
    instruction = await Database.get("PIVechicleInstruction");
  };

  //to get activity id and activityTypeid
  const callGetActivityid = async () => {
    try {
      /* wrong quote number modal */
      if (quoteNumber.match(POLICY_NUMBER_REGX) == null) {
        if (!wrongQuoteModalVisible) {
          setWrongQuoteModalVisible(true);
          setISsLoading(false);
          return;
        }
      }
      //API call
      const { getUserDetails } = require("../common/Who");
      console.log("*** callGetActivityid before getUserDetails");
      await getUserDetails();
      console.log("*** callGetActivityid after getUserDetails");
      const {
        emailId,
        name,
        phoneNo,
        panHolderName,
        panNo,
        agentNumber,
      } = require("../common/Who");
      console.log("*** callGetActivityid after getUserDetails name: " + name);

      const AppLoginStatus = await Database.get("AppLoginStatus");
      const USERTYPE = AppLoginStatus?.userType;
      let body;
      var userType = await getUserType();

      if (USERTYPE === "Customer") {
        body = {
          activityTypeId: "0",
          customerDetailData: {
            emailId: emailId,
            name: name,
            phoneNo: phoneNo,
          },
          licensePlateNumber: "",
          previousPolicyExpired: true,
          quoteNumber: quoteNumber,
          requestedBy: userType,
          appName: "Quick Scan",
        };
      } else if (USERTYPE === "DealerOrAgent") {
        body = {
          activityTypeId: "0",
          customerDetailData: {
            emailId: emailId,
            name: name,
            phoneNo: phoneNo,
            panHolderName: panHolderName,
            panNo: panNo,
          },
          agentId: agentNumber,
          licensePlateNumber: "",
          previousPolicyExpired: true,
          quoteNumber: quoteNumber,
          requestedBy: userType,
          appName: "Quick Scan",
        };
      }

      activityData = await getActivityid({ body });

      registrationNumber = activityData?.additionalActivitiesList.filter(
        (item) => {
          if (item.key == "Registration Number") {
            return item;
          }
        }
      );
      let userNCB = activityData?.additionalActivitiesList.filter((item) => {
        if (item.key == "User NCB") {
          return item;
        }
      });
      setISsLoading(false); // adding data to redux
      dispatch({
        type: "ACTIVITY_DATA",
        payload: {
          activityId: activityData?.activityID,
          activityTypeId: activityData?.activityTypeId,
          licensePlateNumber:
            registrationNumber === undefined ? "" : registrationNumber[0].value,
          toWithQuote: toWithQuote,
          toTutorial: toTutorial,
          quoteNumber: quoteNumber,
        },
      });
      await Database.update("PIVechicleData", {
        activityId: activityData?.activityID,
        activityTypeId: activityData?.activityTypeId,
        licensePlateNumber:
          registrationNumber === undefined ? "" : registrationNumber[0].value,
        toWithQuote: toWithQuote,
        toTutorial: toTutorial,
        quoteNumber: quoteNumber,
        ncb:
          userNCB === undefined || userNCB.length == 0
            ? 0
            : Number(userNCB[0].value),
        vechicleType: "",
      });
      await Database.update("PICompleteStatus", {
        piStatus: false,
      });
      // var RealmData = Database.get("PIVechicleData"); // console.log("&&&&&&&&& ",RealmData);

      // set header title based on activity type id
      getIsGDD(activityData?.activityTypeId);

      navigation.navigate("Toturial", {
        activityId: activityData?.activityID,
        activityTypeId: activityData?.activityTypeId,
        licensePlateNumber: registrationNumber[0]?.value,
      });
    } catch (error) {
      firebaseAttributes(error);
      errorRecord(error);
      console.log("IN WithQuote => error in service ", error);
      setTimeout(() => {
        if (!wrongQuoteModalVisible) {
          setWrongQuoteModalVisible(true);
        }
        //   Alert.alert(
        //     "Oops! Unable to proceed",
        //     "We are experiencing technical issue, Please try after sometime. Or Still You can continue with registration number",
        //     [
        //       {
        //         text: "Cancel",
        //         onPress: () => { },
        //         style: "cancel",
        //       },
        //       {
        //         text: "Continue",
        //         onPress: () => {
        //           navigation.navigate("WithoutQuoteScreen");
        //         },
        //       },
        //     ]
        //   );
      }, 100);
      setISsLoading(false);
    }
  };

  /* Check if the case is GDD then change the Header */
  const getIsGDD = async (activityTypeId) => {
    if (
      activityTypeId &&
      activityTypeId == ACTIVITY_TYPE_MOTOR_4W_OD_NB_PRE_INSPECTION_SELF_SURVEY
    ) {
      await Database.set("PIAppTitle", { title: "PAYD App" });
    } else {
      await Database.set("PIAppTitle", { title: "Pre Inspection" });
    }
  };

  const clearAllRealmData = async () => {
    try {
      await Database.remove("PIAppId");
      await Database.remove("PIOfflineData");
      await Database.remove("PIVechicleData");
      await Database.remove("PIVechicleInstruction");
      await Database.remove("PIOfflineVechicleData");
      await Database.remove("PIVideoCompleteStatus");
      await Database.update("PIGonePoseDetection", {
        GoneposeDetectionCount: 0,
      });

      await Database.update("PIPoseDetectionCompleted", {
        poseDetectionCompletedCount: 0,
      });
      await Database.update("PIRetryCount", {
        retryCount: 0,
        index: 0,
        isAddNewImageData: false,
      });

      await Database.update("PIclickedCount", {
        clickedCount: 0,
      });

      await Database.update("PIUploadedCount", {
        uploadedCount: 0,
      });
      // await Database.remove("PIMediaStatus"); for Mult Activity
      await Database.remove("PIOnProgress");
      await Database.remove("PISuccessFlag");
      await Database.remove("PIReUploadFailed");
    } catch (error) {
      firebaseAttributes(error);
      errorRecord(error);
    }
  };
  const clearRedux = () => {
    dispatch({
      type: "CLEAR_ACTIVITY_DATA",
    });
    dispatch({
      type: "CLEAR_IMAGE_CLICKED_COUNT_REDUX",
    });
    dispatch({
      type: "CLEAR_LAST_DATA_REDUX",
    });
    dispatch({
      type: "CLEAR_SENSOR_DETAILS_REDUX",
    });
    dispatch({
      type: "CLEAR_UPLOAD_IMAGE_REDUX",
    });
    dispatch({
      type: "CLEAR_UPLOAD_IMAGE_DATA_REDUX",
    });
    dispatch({
      type: "CLEAR_VEHICLE_DETAILS_REDUX",
    });
    dispatch({
      type: "CLEAR_RETRY_COUNT_REDUX",
    });
    dispatch({
      type: "CLEAR_RETRY_IMAGE_STATE",
    });
    dispatch({
      type: "CLEAR_RCB_DATA",
    });
    dispatch({
      type: "CLEAR_FAILED_DATA",
    });
  };

  const checkPICondition = async () => {
    try {
      if (vechicleData?.quoteNumber == quoteNumber && false) {
        // false indicates it will not ask "Continue" option if previously any pre-inspection done
        setisPIModalVisible(true);
      } else {
        setisPIModalVisible(false);
        setISsLoading(true);
        await clearAllRealmData();
        await clearRedux();
        if (isNetworkAvailable) {
          callGetActivityid(); // sending false if it is not offline flow
          showOfflineModal(false);
        } else {
          showOfflineModal(true);
        }
        firebaseEvents(
          "Continue_New_Flow",
          { quoteNumber: quoteNumber },
          activityData?.activityID,
          activityData?.activityTypeId,
          ""
        );
      }
    } catch (error) {
      firebaseAttributes(error);
      errorRecord(error);
    }
  };

  const realmStoreStartOver = async (status) => {
    try {
      await Database.update("PIStartOver", {
        isStartOver: status,
      });
    } catch (error) {
      firebaseAttributes(error);
      errorRecord(error);
    }
  };

  const vechicleTypeModal = () => {
    return (
      <Modal
        isVisible={showOfflineModal}
        headerImageVisible={false}
        shouldHeaderVisible={false}
        onBackdropPress={() => {
          setShowOfflineModal(false);
        }}
      >
        <View style={{ marginHorizontal: 8 }}>
          <Text style={[styles.subHeaderText, { marginHorizontal: 8 }]}>
            Please select vechicle type
          </Text>
          <View
            style={{ flexDirection: "row", justifyContent: "space-between" }}
          >
            {/* 4 W */}
            <ProductCard
              imageSource={car}
              title={translate("4 wheeler")}
              key={"4 wheeler"}
              onPress={() => {
                set4wclicked(true);
                set2wclicked(false);
                setCVclicked(false);
                setIsVechicleTypeSelected(true);
                if (selected === "Pre Inspection") {
                  setActivityTypeId(5);
                } else if (selected === "Pay as you drive") {
                  setActivityTypeId(63);
                }
                setVechicleType("FourWheller");
              }}
              style={{
                marginLeft: 8,
                marginBottom: 16,
                borderColor: _4Wclicked ? Colors.digitYellow : "#DDDDDD",
                width: "28%",
                borderWidth: 1,
                borderRadius: 4,
                backgroundColor: "white",
              }}
            />

            {/* 2 W */}
            <ProductCard
              imageSource={Bike}
              title={translate("2 wheeler")}
              key={"2 wheeler"}
              onPress={() => {
                set4wclicked(false);
                set2wclicked(true);
                setCVclicked(false);
                setIsVechicleTypeSelected(true);
                setActivityTypeId(26);
                setVechicleType("TwoWheeler");
              }}
              style={{
                marginLeft: 8,
                marginBottom: 16,
                borderColor: _2Wclicked ? Colors.digitYellow : "#DDDDDD",
                width: "28%",
                borderWidth: 1,
                borderRadius: 4,
                backgroundColor: "white",
              }}
            />

            {/* cummercial */}
            <ProductCard
              imageSource={cv}
              title={translate("Commercial")}
              key={"Commercial"}
              onPress={() => {
                set4wclicked(false);
                set2wclicked(false);
                setCVclicked(true);
                setIsVechicleTypeSelected(true);
                setActivityTypeId(30);
                setVechicleType("Commercial");
              }}
              style={{
                marginLeft: 8,
                marginBottom: 16,
                borderColor: cvclicked ? Colors.digitYellow : "#DDDDDD",
                width: "28%",
                borderWidth: 1,
                borderRadius: 4,
                backgroundColor: "white",
              }}
            />
          </View>

          {!isNetworkAvailable && !_2Wclicked && !cvclicked && (
            <View style={{ marginHorizontal: 8 }}>
              <Text style={styles.subHeaderText}>{"You are here for"}</Text>
              <View
                style={{
                  flexDirection: "row",
                  justifyContent: "space-between",
                  marginVertical: 8,
                }}
              >
                <NewRadioButton
                  onPress={() => {
                    setSelected("Pre Inspection");
                  }}
                  enabled={selected === "Pre Inspection" ? true : false}
                  onSelected={() => {
                    setActivityTypeId(5);
                  }}
                >
                  Pre Inspection
                </NewRadioButton>
                <NewRadioButton
                  onPress={() => {
                    setSelected("Pay as you drive");
                  }}
                  enabled={selected === "Pay as you drive" ? true : false}
                  onSelected={() => {
                    setActivityTypeId(63);
                  }}
                >
                  Pay as you drive
                </NewRadioButton>
              </View>
            </View>
          )}

          <PrimaryButton
            style={{ margin: 8 }}
            onPress={async () => {
              setShowOfflineModal(false);
              await clearAllRealmData();
              await saveDataInOfflineDb();
            }}
          >
            Continue
          </PrimaryButton>
        </View>
      </Modal>
    );
  };

  const logutAndNavigate = async () => {
    try {
      await Database.update("AppLoginStatus", {
        userType: "Customer",
        isAppLoging: false,
      });
      await Database.remove("PIMediaStatus");
      await Database.remove("PICanShowActivity");
      route.params.props.navigation.replace("CustomerDetails");
    } catch (error) {
      firebaseAttributes(error);
      errorRecord(error);
      console.log("Error : ", error);
    }
  };

  const logoutAlertModal = () => {
    Alert.alert("Logout", "Are you sure?", [
      {
        text: "Yes",
        onPress: () => {
          UELogEvent("Pressed Yes in Logout Modal", {
            "Quote Value": quoteNumber,
          });
          logutAndNavigate();
        },
        style: "cancel",
      },
      {
        text: "No",
        onPress: () => {
          UELogEvent("Pressed No in Logout Modal", {
            "Quote Value": quoteNumber,
          });
          console.log("on No pressed");
        },
      },
    ]);
  };

  // save vechicle details
  const saveDataInOfflineDb = async () => {
    var timeStamp = new Date().getTime();
    console.log("saveDataInOfflineDb activityTypeId - ", activityTypeId);
    await Database.update("PIVechicleData", {
      activityId: "Offline_" + timeStamp,
      activityTypeId: activityTypeId,
      licensePlateNumber: "0",
      toWithQuote: toWithQuote,
      toTutorial: toTutorial,
      quoteNumber: quoteNumber,
      ncb: 0,
      vechicleType: "",
    });
    let isPAYD = false;
    if (selected) {
      if (selected === "Pay as you drive") {
        isPAYD = true;
      }
    }

    navigation.navigate("Toturial", {
      isPAYD: isPAYD,
    });
  };

  /* Quote failed modal */

  const wrongQuoteNumberModal = () => {
    return (
      <Modal
        isVisible={wrongQuoteModalVisible}
        headerImageVisible={false}
        shouldHeaderVisible={false}
      >
        <View
          style={{
            height: SCREEN_HEIGHT * 0.65,
            flex: 1,
            paddingHorizontal: 16,
            paddingBottom: 16,
            justifyContent: "space-between",
          }}
        >
          <View
            key={"ModalHeader"}
            style={{
              flex: 0.05,
              flexDirection: "row",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <Text style={[style.muliBoldDB, { fontSize: 18 }]}>OOPS</Text>
            <Icon
              name="close"
              size={24}
              color={Colors.veryLightGray}
              onPress={() => {
                setWrongQuoteModalVisible(false);
              }}
            />
          </View>

          <View style={{ flex: 0.5 }}>
            <Image
              source={{
                uri: "https://d2h44aw7l5xdvz.cloudfront.net/CRM/PRM/oops_something_went_wrong.png",
                cache: "only-if-cached",
              }}
              style={styles.wrong}
            />
            <Text style={[style.muliRegDB, { fontSize: 16, marginTop: 8 }]}>
              Looks like you made a mistake entering your policy/quote number.
            </Text>
          </View>

          <View style={{ flex: 0.25, justifyContent: "space-evenly" }}>
            <PrimaryButton
              onPress={() => {
                setWrongQuoteModalVisible(false);
              }}
            >
              Try Again
            </PrimaryButton>
            <PrimaryButton
              onPress={() => {
                setWrongQuoteModalVisible(false),
                  navigation.navigate("WithoutQuoteScreen");
              }}
              mode={"outlined"}
            >
              I don't know my policy/quote no.
            </PrimaryButton>
          </View>
        </View>
      </Modal>
    );
  };
  const handleContinue = () => {
    UELogEvent("Clicked on continue", {
      "Button Title": "Continue",
      quoteNumber: quoteNumber,
    });
    realmStoreStartOver(true);
    if (isNetworkAvailable) {
      checkPICondition();
    } else {
      setShowOfflineModal(true);
    }
  };

  const handleDontHaveQuoteNumber = () => {
    console.log("**************************** withQuote onClicked");
    UELogEvent("Clicked on dont have quote number", {
      "Button Title": "Don’t have Quote/Policy No?",
    });
    navigation.navigate("WithoutQuoteScreen");

    firebaseEvents(
      "dont_have_quote_number",
      { quoteNumber: quoteNumber },
      activityData?.activityID,
      activityData?.activityTypeId,
      ""
    );
  };
  return (
    <KeyboardAvoidingView
      style={{ flex: 1, backgroundColor: Colors.white }}
      behavior={"padding"}
      enabled
    >
      <ScrollView
        style={{ flex: 1, backgroundColor: Colors.white }}
        keyboardShouldPersistTaps={iOS ? "always" : "handled"}
        keyboardDismissMode="on-drag"
        contentContainerStyle={{ flexGrow: 1 }}
      >
        {vechicleTypeModal()}
        {wrongQuoteNumberModal()}
        <View style={styles.main}>
          {/* Header View */}
          <View style={{}}>
            <Header
              hideArrowBackButton={iOS ? true : false}
              onlanguagechange={() => {
                forceUpdate();
              }}
              onbackPress={() => {
                navigation.navigate("ActivityStatusScreen");
              }}
              isLogoutVisible={true}
              onLogoutPress={() => {
                UELogEvent("Logout Pressed", {
                  "Message Shown": "Are you sure",
                });

                logoutAlertModal();
              }}
              customTitle="Welcome"
            />
          </View>
          {/* <StencilAnimation/> */}
          <Spinner loading={isLoading} />

          {/* Content View */}
          <View style={{ flex: 1 }}>
            {/* Image View */}
            <View
              style={{
                flex: 0.2,
                backgroundColor: "#F5F5F5",
                justifyContent: "center",
                alignItems: "center",
                paddingVertical: 20,
              }}
            >
              <Image
                source={girl_selfi}
                style={{
                  width: "75%",
                  height: (SCREEN_HEIGHT * 20) / 100,
                  resizeMode: "contain",
                  marginLeft: 70,
                }}
              />
            </View>

            {/* Text & Input View */}
            <View
              style={{
                flex: 0.15,
                justifyContent: "space-evenly",
                marginHorizontal: 16,
                paddingVertical: 8,
              }}
            >
              <Text
                style={{ fontSize: 16, fontWeight: "400", paddingVertical: 8 }}
              >
                This will only take a few minutes
              </Text>
              <Text
                style={[style.muliBoldDB, { fontSize: 16, paddingVertical: 8 }]}
              >
                Read the instruction carefully at every step.
              </Text>
              {/* {!isNetworkAvailable && (
                <View>
                  <Text style={styles.subHeaderText}>{"You are here for"}</Text>
                  <View
                    style={{
                      flexDirection: "row",
                      justifyContent: "space-between",
                      marginVertical: 8,
                    }}
                  >
                    <NewRadioButton
                      onPress={() => {
                        setSelected("Pre Inspection");
                      }}
                      enabled={selected === "Pre Inspection" ? true : false}
                      onSelected={() => {
                        setActivityTypeId(5);
                      }}
                    >
                      Pre Inspection
                    </NewRadioButton>
                    <NewRadioButton
                      onPress={() => {
                        setSelected("Pay as you drive");
                      }}
                      enabled={selected === "Pay as you drive" ? true : false}
                      onSelected={() => {
                        setActivityTypeId(63);
                      }}
                    >
                      Pay as you drive
                    </NewRadioButton>
                  </View>
                </View>
              )} */}
              <TextInput
                autoCapitalize="characters"
                label={translate("Enter Quote/Policy number")}
                // value={odometerReadings}
                onChangeText={(value) => {
                  const val = value.trim();
                  setQuoteNumber(val);
                }}
                errorMsge={
                  quoteNumber.match(POLICY_NUMBER_REGX) == null
                    ? renderErrorMsge({
                        type: "input",
                        text: "quote / policy number",
                      })
                    : null
                }
              />
            </View>

            {/* Button View */}
            <View style={{ flex: 0.4, marginHorizontal: 16 }}>
              <PrimaryButton
                disabled={quoteNumber.length > 0 ? false : true}
                style={{ marginVertical: 8 }}
                onPress={handleContinue}
              >
                {translate("Continue")}
              </PrimaryButton>
              <NewRoundButton
                style={{
                  width: "70%",
                }}
                onPress={handleDontHaveQuoteNumber}
              >
                Don’t have Quote/Policy No?
              </NewRoundButton>
            </View>
          </View>
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
};
export default WithQuote;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-end",
  },
  main: {
    flex: 1,
    backgroundColor: "#FFFFFF",
  },
  imageView: {
    flex: 0.4,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 50,
  },
  textView: {
    flex: 0.45,
  },
  buttonView: {
    flex: 0.15,
  },
  welcomeText: {
    fontSize: 18,
    fontFamily: "Muli-ExtraBold",
    marginBottom: 9,
    marginTop: 52,
  },
  subText: {
    fontFamily: "Muli-Regular",
    fontSize: 16,
    marginBottom: 23,
  },
  subView: {
    flex: 1,
    marginLeft: 24,
    marginRight: 24,
  },
  wrong: {
    height: "90%",
    width: "100%",
    aspectRatio: 1,
    resizeMode: "contain",
    alignSelf: "center",
  },
  subHeaderText: {
    fontSize: 16,
    // fontFamily: "Muli-Bold",
    marginBottom: 12,
  },
});
