import React, { useState, useEffect, useRef } from 'react';
import Container from '../components/container';
import { useRoute } from '@react-navigation/native';
import CustomButton from '../components/customButton';
import { globalStyles, customStyles, GetPageTheme } from "../styles/Global";
import { StatusBar, Image, TextInput, View, Text, ScrollView, TouchableOpacity, Platform, PermissionsAndroid, KeyboardAvoidingView, Keyboard, Animated, Alert } from 'react-native';
import { ReactReduxContext, connect, useSelector, useDispatch } from 'react-redux';
import { mapStateToProps, mapDispatchToProps } from '../reducers/contextProvider';
import { notify } from '../components/notify';
import { get_item, set_item } from '../components/localStorage';
import { requestMultiplePerms, _checkLocationPermission } from '../components/geolocation';
import OtpInputs from 'react-native-otp-inputs';
import SplashScreen from 'react-native-splash-screen';
import { SvgUri, SvgXml } from 'react-native-svg';
import { version, copyrightText, baseurl, logoImage, db, AppVersion, DevType } from '../constants/constants';
import { METHODS, getMethodName } from '../constants/methodNames';
import GradientButton from '../components/gradientButton';
import { Ionicons } from '../components/icons';
import * as RNFS from "react-native-fs";
import RNApkInstaller from "@dominicvonk/react-native-apk-installer";
import CustomModal from '../components/CustomModal';
import Graphic1 from '../assets/performics/mpin.svg';
import { AlertForServerDT, enableGPS, getDownloadJson, getDownloadJson1, getProjectData, getProjectInfo, getServerDT, login, RestoreProjectInProps } from '../controller/functions';
import CustomLoader from '../components/CustomLoader';
import Geolocation from 'react-native-geolocation-service';
import moment from 'moment';
import DeviceInfo from 'react-native-device-info';
import Text_eng from '../constants/Text_eng.json';
import Text_thai from '../constants/Text_thai.json';
import DownloadAPKModal from '../components/downloadApkModal';
import ReactNativeBlobUtil from 'react-native-blob-util';
import IRLogin from '../components/IRLogin';
import crashlytics from '@react-native-firebase/crashlytics';


function Mpin(props) {
  const route = useRoute();
  // get all theme styles acc to current theme set 
  const todayDate = moment(new Date()).format('DD/MM/YYYY');
  const [ST, setST] = useState((props.StaticText || {}));
  const PageTheme = GetPageTheme(props.DarkMode, route.name);
  const customStyle = customStyles(props.DarkMode, route.name);
  const [state, setState] = useState({ mpin: '', cmpin: '' });
  const [fieldsChange, setFieldsChange] = useState(false);
  const animatedEffects = useRef(new Animated.Value(0)).current;
  const [downloading, setDownloading] = useState(false);
  const [processing, setProcessing] = useState(false);
  const [loading, setLoading] = useState(true);
  const [dowloadedCount, setDowloadedCount] = useState(0);
  const [totalCount, setTotalCount] = useState(0);
  const [isMPINUpdate, setIsMPINUpdate] = useState(false);
  const [loaderTitle, setLoaderTitle] = useState('Fetching server date time...');
  const [downloadingText, setDownloadingText] = useState('');
  const [verToUpdate, setVerToUpdate] = useState('');
  const [loginRes, setLoginRes] = useState({});
  const [showVerUpdateModal, setShowVerUpdateModal] = useState(false);

  useEffect(() => {
    SplashScreen.hide();
    getsetLanguage();
    requestMultiplePerms();
    RestoreProjectInProps(props);
    console.log('IRLogin', IRLogin);
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      () => {
        Animated.timing(animatedEffects, {
          toValue: 1,
          duration: 400,
          useNativeDriver: (Platform.OS == 'ios' ? false : true),
        }).start();
      }
    );
    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        Animated.timing(animatedEffects, {
          toValue: 0,
          duration: 400,
          useNativeDriver: (Platform.OS == 'ios' ? false : true),
        }).start();
      }
    );
    return () => {
      keyboardDidHideListener.remove();
      keyboardDidShowListener.remove();
    };
  }, []);

  useEffect(() => {
    autosubmit();
  }, [isMPINUpdate]);

  useEffect(() => {
    console.log('props.StaticText changed');
    setST(props.StaticText);
  }, [props.StaticText]);

  async function getsetLanguage() {
    let country = await get_item('UserCountry');
    let lngJson = country == '2' ? Text_thai : Text_eng;
    props.setStaticText(lngJson);
    setTimeout(() => {
      setLoading(false); setProcessing(false);
      console.log('props.StaticText timeout');
    }, 3000);
  }

  async function checkIfData_Downloaded() {
    try {
      const isDataStorageCleared = await get_item('DataStorageCleared');
      console.log('iisDataStorageCleared on login:', isDataStorageCleared);
      let dateWiseDataDownload = await get_item('dateWiseDataDownload');
      let dateWiseDataDownload1 = dateWiseDataDownload != null ? JSON.parse(dateWiseDataDownload) : {};
      if (isDataStorageCleared != '1') {
        if (dateWiseDataDownload1[todayDate] != null) {
          let d = dateWiseDataDownload1[todayDate];
          props.setTodayDataExists(d);
          props.setGlobalData({ isDataDownloaded: d });
        }
        else {
          let lods = {};
          lods[todayDate] = false;
          set_item('dateWiseDataDownload', JSON.stringify(lods));
          props.setTodayDataExists(false);
        }
      }
    }
    catch (err) {
      console.log(err);
    }
  }
  const mpinlogin = async () => {
    const { mpin, cmpin } = state;
    if (validate()) {
      //set m-pin info in global reducer
      props.set_mpin({ mpin: mpin });
      //set m-pin info in encryted local storage
      set_item('mpin', mpin);
      //clear stack and mpin open login screen 
      refreshToken();
    }
  }

  function autologin() {
    const { mpin, cmpin } = state;
    if (mpin.trim().length == 4 && cmpin.trim().length == 4) {
      mpinlogin();
    }
  }

  const validate = () => {
    const { mpin, cmpin } = state;
    console.log('state', state)
    if (mpin.trim().length == 0) {
      notify(ST.PleaseenterMPin, 'SHORT');
      return false;
    }
    else if (mpin.trim().length > 0 && mpin.trim().length < 4) {
      notify(ST.Pleaseenter4digitMPin, 'SHORT');
      return false;
    }
    if (cmpin.trim().length == 0) {
      notify(ST.PleaseconfirmyourMPin, 'SHORT');
      return false;
    }

    if (cmpin != mpin) {
      notify(ST.ConfirmMPindoesnotmatch, 'SHORT');
      return false;
    }

    return true;
  }



  async function refreshToken() {
    let login_credentials = await get_item('login_credentials');
    let credentials = login_credentials != null ? JSON.parse(login_credentials) : {};
    if (credentials.un != null && credentials.pass != null) {
      _getCurrentLocation(credentials.un, credentials.pass);
    }
    else {
      notify(ST.Sessionnotfoundpleaseloginagain, 'SHORT');
      // clear stack and open login
      props.navigation.reset({ index: 0, routes: [{ name: 'Login' }], });
    }
  }

  async function autosubmit() {
    const { mpin, cmpin } = state;
    if (mpin.trim().length == 4 && cmpin.trim().length == 4) {
      mpinlogin();
    }
  }

  async function _getCurrentLocation(un, pass) {
    console.log("checkpass:", pass, un)
    setLoaderTitle(props.StaticText.Loading + '...')
    const hasPermission = await _checkLocationPermission();
    if (hasPermission) {
      const gpsEnabled = await DeviceInfo.isLocationEnabled();
      if (!gpsEnabled) {
        notify("Please enable GPS to continue");
        return;
      }
      setProcessing(true);
      Geolocation.getCurrentPosition(
        async (position) => {
          let loc = { lat: position.coords.latitude, lng: position.coords.longitude };
          console.log("location_user", loc)
          setState({ ...state, location: loc });
          await userlogin(loc, un, pass);
        },
        (error) => {
          notify(ST.Cannotgetuserposition);
          let loc = { lat: '0', lng: '0' };
          userlogin(loc, un, pass);
          setProcessing(false);
        },
        { enableHighAccuracy: false, distanceFilter: 0, interval: 1000, fastestInterval: 2000, timeout: 10000, maximumAge: 10000 }
      );
    }
    else {
      notify(ST.Pleaseallowlocationpermissiontologin);
    }
  }
  async function update_project() {
    // refresh project settings
    let defData = { isUpdated: false, ProjectDetails: {}, projectid: "" }
    let projectid = await get_item('projectCode');
    return await new Promise((resolve, reject) => {
      if (projectid != '' && projectid != null) {
        getProjectData(projectid)
          .then((res) => {
            if (res.success && res.responseData.projectName != null) {
              //set project info in global reducer
              const pdata = getProjectInfo(res.responseData, projectid);
              props.set_project(pdata);
              //set project info in encryted local storage
              Promise.all([
                set_item('projectCode', projectid),
                set_item('projectInfo', JSON.stringify(res.responseData)),
              ]);
              defData['projectid'] = projectid;
              defData['isUpdated'] = true;
              defData['ProjectDetails'] = res.responseData;
              resolve(defData);
            }
            else {
              resolve(defData);
            }
          })
          .catch((err) => {
            console.log('err', err);
            resolve(defData);
          });
      }
      else {
        resolve(defData);
      }
    })
      .catch((err) => {
        return defData;
      });

  }

  async function checkIfData_Downloaded() {
    try {
      const isDataStorageCleared = await get_item('DataStorageCleared');
      console.log('iisDataStorageCleared on login:', isDataStorageCleared);
      let dateWiseDataDownload = await get_item('dateWiseDataDownload');
      let dateWiseDataDownload1 = dateWiseDataDownload != null ? JSON.parse(dateWiseDataDownload) : {};
      if (isDataStorageCleared != '1') {
        if (dateWiseDataDownload1[todayDate] != null) {
          let d = dateWiseDataDownload1[todayDate];
          props.setTodayDataExists(d);
          props.setGlobalData({ isDataDownloaded: d });
        }
        else {
          let lods = {};
          lods[todayDate] = false;
          set_item('dateWiseDataDownload', JSON.stringify(lods));
          props.setTodayDataExists(false);
        }
      }
    }
    catch (err) {
      console.log(err);
    }
  }

  const userlogin = async (loc, username, password) => {
    setLoaderTitle(props.StaticText.Loading + '...')
    let proj_data = await update_project();
    let { ProjectDetails, projectid } = proj_data
    let [
      loginDetails,
    ] = await Promise.all([
      get_item('loginOfDays'),
    ]);
    let loginOfDays = loginDetails != null ? JSON.parse(loginDetails) : {};
    const todate = new Date();
    const today = moment(todate).format("HH:mm:ss");
    let [manufacturer, os, imeiNo1] = await Promise.all([
      DeviceInfo.getManufacturer(),
      DeviceInfo.getSystemVersion(),
      DeviceInfo.getAndroidId()
    ]);
    console.log("uptimised", "Mpin")
    const model = `${DeviceInfo.getBrand()} ${DeviceInfo.getModel()}`;
    console.log("Device Info ModelMpin:", model);
    const data = { un: username, pass: password, Intime: today, lat: loc.lat, lng: loc.lng, manufacturer: manufacturer, model: model, os: os, imeiNo1: imeiNo1, imeiNo2: imeiNo1 };
    const method_name = getMethodName(METHODS.LOGIN_METHOD);
    const url = (props.baseurl || baseurl) + method_name;
    console.log('url:', url);
    await login(url, data)
      .then(async (res) => {
        if (res.networkErr && res.error) {
          notify(ST.Pleaseconnecttointernet + '-' + res.error, 'SHORT');
        }
        else if (!res.false && res.error) {
          notify(res.error, 'SHORT');
        }
        else {
          let currentAppVersion = res.AppVersion != null ? res.AppVersion.toString() : '';
          if (currentAppVersion != null && currentAppVersion != '' && AppVersion != null && AppVersion != '' && currentAppVersion.replace(" ", '') != AppVersion.replace(" ", '') && Platform.OS == 'android' && DevType == "Prod") {
            console.log('update version');
            setVerToUpdate(currentAppVersion);
            setLoginRes(res);
            setProcessing(false);
            setShowVerUpdateModal(true);
            return;
          }
          notify(ST.LoginSuccess, 'SHORT');
          //set login info in global reducer
          crashlytics().setUserId(res.UserId);
          const pdata = { islogin: true, UserId: res.UserId, SecurityToken: '', sessionData: res };
          props.set_session(pdata);
          props.set_VisitDate({ VisitDate: res.VisitDate })
          const proj_udata = getProjectInfo(ProjectDetails, projectid, res.AppClearData);
          props.set_project(proj_udata);
          let country = res.CountryId != null ? res.CountryId + '' : '';
          //set login info in encryted local storage
          Promise.all([
            set_item('islogin', 'done'),
            set_item('loginToken', res.UserId),
            set_item('loginInfo', JSON.stringify(res)),
            set_item('UserCountry', country)
          ]);
          props.set_user_details({ session_name: res.UserId });
          let lngJson = country == '2' ? Text_thai : Text_eng;
          props.setStaticText(lngJson)
          await checkIfData_Downloaded();
          let d1 = new Date();
          let d2 = moment(d1).format('MM/DD/YYYY');
          let loginInfo = await get_item('loginInfo');
          const loginDetails = JSON.parse(loginInfo);
          const tablesToDownload = [
            'PreviousDay_PendingJourneyPlan',
            'Mapping_SideMenuMiscellaneous',
            'Mapping_MenuConfiguration',
            'Master_AppDashboardWebView'
          ];

          let rs = await getData2(tablesToDownload, loginDetails);
          setProcessing(false);
          const final = Object.assign({}, ...rs);
          const misc = final?.Mapping_SideMenuMiscellaneous || [];
          const menuConfig = final?.Mapping_MenuConfiguration || [];
          const QAD_arr = final?.PreviousDay_PendingJourneyPlan || [];
          const app_dashbWebview_arr = final?.Master_AppDashboardWebView || []
          if (app_dashbWebview_arr?.length > 0) {
            props.set_AppDashboardWebViewObj(app_dashbWebview_arr[0]?.AppDashboardWebUrl)
          } else {
            props.set_AppDashboardWebViewObj("")
          }
          const grooming = misc?.find(item => item.ScreenName === "GROOMINGIMG");
          let groomingObj = {}
          if (grooming && grooming != undefined && misc) {
            const groomingData = menuConfig.filter(item => item.ScreenName === "GROOMINGIMG");
            groomingObj = groomingData.reduce((acc, item) => {
              acc[item.KPIFieldName] = item.KPIFieldDisplayName;
              return acc;
            }, {});

            groomingObj.MenuName = grooming.MenuName
          }

          props.set_GroomingObj(groomingObj);
          // <<<<******for P-PAY
          const pPAY = misc?.find(item => item.ScreenName === "PPAY");
          let pPAYObj = {}
          if (pPAY && pPAY != undefined && misc) {
            const pPAYData = menuConfig.filter(item => item.ScreenName === "PPAY");
            pPAYObj = pPAYData.reduce((acc, item) => {
              acc[item.KPIFieldName] = item.KPIFieldDisplayName;
              return acc;
            }, {});
            pPAYObj.MenuName = pPAY.MenuName
          }

          props.set_pPAYObj(pPAYObj);
          // <<<<******for P-PAY*****************>>>>>>>
          let prevStoreStatus = QAD_arr
          let prevStoreObjStr = await get_item('prevStoreStatus');
          let prevStoreObj = prevStoreObjStr && JSON.parse(prevStoreObjStr)
          let prevCond = !Boolean(prevStoreObj?.Status == true && prevStoreObj?.visiteDate == d2)
          if (prevStoreStatus.length > 0 && prevCond) {
            props.navigation.reset({ index: 0, routes: [{ name: 'PrevStoreReason', params: { UserData: res, 'TodayLogin': true } }], });
          } else if (loginOfDays[todayDate] != null) {
            props.setLoginExists(true);
            props.navigation.reset({ index: 0, routes: [{ name: 'NoticeBoard', params: { UserData: res, 'TodayLogin': true } }], });
          }
          else {
            props.setLoginExists(false);
            props.navigation.reset({ index: 0, routes: [{ name: 'One_QAD', params: { UserData: res, 'TodayLogin': false } }], });
          }
        }
      })
      .catch((err) => {
        setProcessing(false);
        console.log('onPage Login error1', err);
      });
  }

  async function getData2(downloadTypes = [], loginDetails = {}) {
    try {
      const url = (props.baseurl || baseurl) + getMethodName(METHODS.DOWNLOADJSON_METHOD);
      const calls = downloadTypes.map(type => {
        const body = { Downloadtype: type, username: loginDetails.UserId, empid: "" };
        return getDownloadJson(url, body);
      });
      const results = await Promise.all(calls);
      return results;
    } catch (err) {
      console.log(err);
    }
  }

  async function UpdateAppVersion() {
    setShowVerUpdateModal(false);
    let res = loginRes;
    let AppPath = res.AppPath ? res.AppPath : '';
    if (Platform.OS == 'ios') {
      props.navigation.reset({ index: 0, routes: [{ name: 'NoticeBoard', params: { UserData: res } }], });
    }
    else {
      if (AppPath != '' && AppPath != null) {
        // Do you have permission to install from unknown sources?
        let hasAPKInstallPerm = RNApkInstaller.haveUnknownAppSourcesPermission();
        if (!hasAPKInstallPerm) {
          // Turn on Unknown Sources permission settings
          RNApkInstaller.showUnknownAppSourcesPermission();
        }
        // android update app
        setDownloading(true);
        let file_parts = AppPath.split('/');
        let filename = file_parts[file_parts.length - 1];
        const filePath = RNFS.DownloadDirectoryPath + "/" + filename;
        console.log('filePath for downloading:', filename, filePath);
        let size = 0;
        let isExists = await RNFS.exists(filePath).then((res) => { return res; });
        if (isExists) {
          let tempPath = RNFS.DocumentDirectoryPath + "/" + filename;
          await RNFS.moveFile(filePath, tempPath).then((res) => { console.log('file moved'); });
          console.log('tempPath:', tempPath);
          await RNFS.unlink(tempPath);
        }

        setTotalCount(size);
        // setDownloadingText('0%')
        setDownloadingText('0 %')
        ReactNativeBlobUtil.config({
          // response data will be saved to this path if it has access right.
          addAndroidDownloads: {
            path: filePath,
            useDownloadManager: true,
            title: filename,
            description: 'An APK that will be installed',
            mime: 'application/vnd.android.package-archive',
            notification: true,
            mediaScannable: true,
          }
        })
          .fetch('GET', AppPath, {
            //some headers ..
          })
          .progress((received, total) => {
            let status_inpercent = ((received / total) * 100);
            try {
              status_inpercent = status_inpercent != NaN && status_inpercent != null ? parseInt(status_inpercent) : status_inpercent;
            }
            catch (err) {
              console.log('status_inpercent error:', err);
            }
            setDownloadingText(status_inpercent + ' %');
            setDowloadedCount(received);
            setTotalCount(total);
          })
          .then(async (res) => {
            // the path should be dirs.DocumentDir + 'path-to-file.anything'
            // let status = res.info().status;
            let cache_filePath = res.path();
            console.log('The file saved to ', cache_filePath, filePath);
            setDownloading(false);
            if (cache_filePath != null && cache_filePath != "" && cache_filePath != 'undefined') {
              RNApkInstaller.install(filePath);
              //set login info in global reducer
              const pdata = { islogin: true, UserId: res.UserId, SecurityToken: '', sessionData: res };
              props.set_session(pdata);
              props.set_VisitDate({ VisitDate: res.VisitDate })

              Promise.all([
                set_item('islogin', 'done'),
                set_item('loginToken', res.UserId),
                set_item('loginInfo', JSON.stringify(res)),
                set_item('clearOnInstall', 'true')
              ]);
              props.set_user_details({ session_name: res.UserId });
            }
          });
      }
      else {
        setDownloading(false);
        notify('Something went wrong! Cannot update version')
      }
    }
  }

  function _render_Alert() {
    return (
      <CustomModal
        style={customStyle.appUpdateMStyle}
        titleStyle={customStyle.appUpdateMT_Style}
        title={ST.Appupdateavailableversion + verToUpdate + ' '}
        message={ST.UpdateapptothenewversionYourdataissafeandwillnotbelostduringthisupdate}
        messageStyle={customStyle.appUpdateMT_SubStyle}
        showModal={showVerUpdateModal}
      >
        <View style={customStyle.storelVisitM_options}>
          <TouchableOpacity style={customStyle.storelVisitM_op_btn} onPress={() => { UpdateAppVersion() }}>
            <Text style={customStyle.storelVisitM_op_btnText}>{ST.OK}</Text>
          </TouchableOpacity>
        </View>
      </CustomModal>
    )
  }
  function _renderAnimPart() {
    let cl_scale = 1, cl_ty = 0, pl_scale = 1, illus_scale = 1, illus_ty = 0, formty = 0;
    if (animatedEffects != null) {
      pl_scale = animatedEffects.interpolate({
        inputRange: [0, 1],
        outputRange: [1, 0.7],
      });
      cl_scale = animatedEffects.interpolate({
        inputRange: [0, 1],
        outputRange: [1, 0.6],
      });
      cl_ty = animatedEffects.interpolate({
        inputRange: [0, 1],
        outputRange: [0, -40],
      });
      illus_scale = animatedEffects.interpolate({
        inputRange: [0, 1],
        outputRange: [1, 0.5],
      });
      illus_ty = animatedEffects.interpolate({
        inputRange: [0, 1],
        outputRange: [0, -160],
      });
      formty = animatedEffects.interpolate({
        inputRange: [0, 1],
        outputRange: [0, -130],
      });
    }
    return (

      <View style={customStyle.keyba_inner_view}>
        <Animated.Image style={[customStyle.performics_logo,
        {
          transform: [
            { scale: pl_scale }
          ],
        }
        ]} source={require('../assets/image/PerformicsLogo.png')} />

        {props.splashlogo != null && props.splashlogo != '' &&
          <Animated.Image style={[customStyle.company_logo,
          {
            transform: [
              { scale: cl_scale },
              { translateY: cl_ty },
            ],
          }
          ]} source={{ uri: props.splashlogo }} />
        }

        <Animated.View style={[
          {
            transform: [
              { scale: illus_scale },
              { translateY: illus_ty },
            ],
          }
        ]}>
          <Graphic1 style={[customStyle.loginIllutration]} width={190} height={190} xml={Graphic1} />
        </Animated.View>
        <Animated.View style={[customStyle.formCon,
        {
          transform: [
            { translateY: formty },
          ],
        }
        ]}>
          <Text style={[customStyle.pagedescText]}>{ST.HeyThere}</Text>
          <Text style={customStyle.pageText}>{ST.SetMPintologinyouraccount}</Text>
          <View style={customStyle.form_group}>
            <Text style={[customStyle.form_label]}>{ST.EnterMPin}</Text>
            <OtpInputs
              handleChange={(code) => { setState({ ...state, mpin: code }); setIsMPINUpdate(!isMPINUpdate); }}
              numberOfInputs={4}
              secureTextEntry={true}
              keyboardType={"numeric"}
              defaultValue={''}
              autofillFromClipboard={false}
              inputStyles={customStyle.otp_inputStyle}
              style={customStyle.otp_field}
            />
          </View>
          <View style={customStyle.form_group}>
            <Text style={[customStyle.form_label]}>{ST.ConfirmMPin}</Text>
            <OtpInputs
              handleChange={(code) => { setState({ ...state, cmpin: code }); setIsMPINUpdate(!isMPINUpdate); }}
              numberOfInputs={4}
              secureTextEntry={true}
              keyboardType={"numeric"}
              defaultValue={''}
              autofillFromClipboard={false}
              inputStyles={customStyle.otp_inputStyle}
              style={customStyle.otp_field}
            />
          </View>
        </Animated.View>
      </View>
    )
  }

  return (
    <Container {...props}>
      {processing && <CustomLoader title={loaderTitle} />}
      {loading && <CustomLoader />}
      {(downloading) && <DownloadAPKModal title={ST.Downloadingapk} downloadCount={dowloadedCount} totalCount={totalCount} hideCounter={true} subtitle={downloadingText} />}
      {_render_Alert()}
      <View style={[customStyle.projectPageWrapper]}>
        <ScrollView
          style={[customStyle.projectScrollCon]}
          contentContainerStyle={customStyle.projectCon}
        >
          {_renderAnimPart()}

        </ScrollView>
        <View style={[customStyle.footerView]}>
          <GradientButton {...props} title={ST.CreateMPin} onPress={() => { mpinlogin(); }} />
          <View style={[customStyle.signatureBox, customStyle.mt10]}>
            <Text style={customStyle.signatureText}>{version}</Text>
            <Text style={customStyle.signatureText}>{copyrightText}</Text>
          </View>
        </View>
      </View>
    </Container>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(Mpin)