import React, { Component } from 'react';
import firebase from 'firebase'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import RegisterScreen from './screens/auth/RegisterScreen';
import LoginScreen from './screens/auth/LoginScreen';
import { firebaseConfig } from './config/firebaseConfig';
import { Text, View } from 'react-native';
import { styles } from './config/styles';

import HomeScreen from './screens/main/Home_page';
import { Provider} from 'react-redux'
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './redux/reducers'
import thunk from 'redux-thunk'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux' 
import { fetchUser } from './redux/actions/index'
/*const seConfig = {
  apiKey: "AIzaSyDW-ABAQ3r_WR7C7WC_3VprL77NcAoitJI",
  authDomain: "freehand-d8ecd.firebaseapp.com",
  projectId: "freehand-d8ecd",
  storageBucket: "freehand-d8ecd.appspot.com",
  messagingSenderId: "48371388186",
  appId: "1:48371388186:web:9a5a4bf1218e17ac6326a3"
};
*/
// Initialize Firebase
//const app = firebase.initializeApp(seConfig);
if (firebase.apps.length === 0) {
  firebase.initializeApp(firebaseConfig)
}

const store = createStore(rootReducer, applyMiddleware(thunk));

const Stack = createStackNavigator();

export class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      loaded: false,
    }
  }
  
  componentDidMount(){
    firebase.auth().onAuthStateChanged((user) => {
      if (!user){
        this.setState({
          loggedIn: false,
          loaded: true,
        })
      }
      else{
        this.setState({
          loggedIn: true,
          loaded: true,
        })
      }
    })
  }

  render() {

    const { loggedIn, loaded } = this.state

    if(!loaded){
      return(
        <View style={styles.regcontainer}>
          <Text>Hopper</Text>
        </View>
      );
    }

    if(!loggedIn){
      return (
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen name={" "} options={{headerShown: false}} component={LoginScreen}/>
            <Stack.Screen name={"Register"} options={{headerTransparent: true, headerTitle: " "}} component={RegisterScreen}/>
          </Stack.Navigator>
        </NavigationContainer>
      );
    }

    return(
      <Provider store={store}>
        <NavigationContainer>
          <Stack.Navigator initialRouteName="Home">
            <Stack.Screen name="Home" component={HomeScreen} />
          </Stack.Navigator>
        </NavigationContainer>
      </Provider>
    );
  }
}

const mapStateToProps = (store) => ({
  currentUser: store.userState.currentUser
})
const mapDispatchProps = (dispatch) => bindActionCreators({fetchUser}, dispatch);

export default connect(mapStateToProps, mapDispatchProps)(App);