/**
 * Root Component
 */

import React from 'react';
import { View, StatusBar, Dimensions } from 'react-native';
import { Provider, connect } from 'react-redux';
import EStyleSheet from 'react-native-extended-stylesheet';

import store from './store';
import App from './navigation/ReduxNavigation';
import { Styles } from './theme';

console.disableYellowBox = true;

const { width } = Dimensions.get('window');

// const entireScreenRatioByWidth = width / 375;
// const entireScreenRatioByHeight = height / 812;
// const entireScreenRatio = entireScreenRatioByWidth > entireScreenRatioByHeight ? entireScreenRatioByHeight : entireScreenRatioByWidth
// console.log(width, height, entireScreenRatioByWidth, entireScreenRatioByHeight, entireScreenRatio);

EStyleSheet.build({ $rem: width / 375 });

const mapStateToProps = (state: any) => ({
  state: state.nav
});

const AppWithNavigationState = connect(mapStateToProps)(App);

const Root = () => (
  <View style={Styles.rootContainer}>
    <StatusBar
      translucent
      barStyle="light-content"
      backgroundColor="transparent"
    />
    <Provider store={store}>
      <AppWithNavigationState />
    </Provider>
  </View>
);

export default Root;
