import React, {useEffect, useRef} from 'react';
import {
  View,
  Text,
  ImageBackground,
  StyleSheet,
  StatusBar,
  SafeAreaView,
} from 'react-native';

import {connect} from 'react-redux';
import StackNavigation from './routers/StackNavigation';
import Modal from 'react-native-modal';
import {SkypeIndicator} from 'react-native-indicators';
import {enableScreens} from 'react-native-screens';
import NoInternetComponent from './components/NoInternet';
import DropdownAlert from 'react-native-dropdownalert';
import DeviceInfo from 'react-native-device-info';
import VersionChecker from './Screens/VersionChecker';
import R from './assets/R';
import {WIDTHXD, HEIGHTXD} from './Config/Functions';
import DropdownManager from './components/DropdownAlert/DropdownManager';

enableScreens();

const RootView = (props) => {
  useEffect(() => {
    DropdownManager.register(
      dropDownAlertRef.current,
      dropDownAlertLongTimeRef.current,
    );
  }, []);

  const dropDownAlertRef = useRef(null);
  const dropDownAlertLongTimeRef = useRef(null);

  const checkVersion = (props) => {
    const verCurrent = DeviceInfo.getVersion();
    console.log('version current', verCurrent);
  };

  return (
    <>
      <View style={{flex: 1}}>
        <Modal isVisible={props.loadingModal.isVisible}>
          <SkypeIndicator color={'white'} />
        </Modal>
        <StackNavigation />
      </View>
      {/*<VersionChecker/>*/}
      <DropdownAlert
        inactiveStatusBarBackgroundColor={R.colors.main}
        activeStatusBarBackgroundColor={R.colors.main}
        warnImageSrc={R.images.iconWarn}
        successImageSrc={R.images.iconSuccess}
        errorImageSrc={R.images.iconError}
        titleStyle={{color: '#fff'}}
        messageStyle={{color: '#fff'}}
        closeInterval={1000}
        ref={dropDownAlertRef}
        warnColor={R.colors.orange400}
        defaultContainer={{
          borderBottomRightRadius: WIDTHXD(30),
          borderBottomLeftRadius: WIDTHXD(30),
          paddingTop: HEIGHTXD(30),
          paddingVertical: HEIGHTXD(30),
          paddingHorizontal: WIDTHXD(20),
        }}
      />
      <DropdownAlert
        inactiveStatusBarBackgroundColor={R.colors.colorMain}
        activeStatusBarBackgroundColor={R.colors.colorMain}
        warnImageSrc={R.images.iconWarn}
        successImageSrc={R.images.iconSuccess}
        errorImageSrc={R.images.iconError}
        titleStyle={{color: '#fff'}}
        messageStyle={{color: '#fff'}}
        closeInterval={600000}
        ref={dropDownAlertLongTimeRef}
        warnColor={R.colors.orange400}
        defaultContainer={{
          borderBottomRightRadius: WIDTHXD(30),
          borderBottomLeftRadius: WIDTHXD(30),
          paddingTop: HEIGHTXD(30),
          paddingVertical: HEIGHTXD(30),
          paddingHorizontal: WIDTHXD(20),
        }}
      />

      <NoInternetComponent />
    </>
  );
};

const mapStateToProps = (state) => {
  return {
    loadingModal: state.ModalLoadingReducer,
  };
};

export default connect(mapStateToProps, {})(RootView);
