import React, { Component } from 'react';
import firebase from 'firebase'
import thunk from 'redux-thunk';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import AvailabilityScreen from './screens/AvailabilityScreen';
import MailScreen from './screens/MailScreen';
//import RegisterScreen from './screens/RegisterScreen';
import RegisterScreen from './screens/auth/RegisterScreen';
//import LoginScreen from './screens/LoginScreen';
import LoginScreen from './screens/auth/LoginScreen';
// import HomeScreen from './screens/HomeScreen';
//import Loading from './components/Loading';
import Loading from './screens/main/Loading';
import { firebaseConfig } from './config/firebaseConfig';
import rootReducer from './redux/reducers'
import HomeScreen from './screens/main/Home_page';
import RoomScreen from './screens/main/RoomScreen';
import Calendario from './screens/main/Calendar';
import Time from './screens/main/StateTime';
import Search from './screens/main/Search';
import Map from './screens/main/Map';
import Confirm from './screens/main/Confirm';
import Cita from './screens/main/Cita';



if (firebase.apps.length === 0) {
  firebase.initializeApp(firebaseConfig)
}

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const store = createStore(rootReducer, applyMiddleware(thunk));

export default 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,
        })
      }
    });
  }

  createHomeStack = () => 
    <Stack.Navigator>
      <Stack.Screen name={"Home"} options={{headerShown: false}} component={HomeScreen}/>
      <Stack.Screen name={"Mail"} options={{ headerStatusBarHeight: 100, headerTransparent: true, headerBackTitle: " ", headerTitle: " "}} component={MailScreen}/>
      <Stack.Screen name={"Availability"} options={{ headerStatusBarHeight: 100, headerTransparent: true, headerBackTitle: " ", headerTitle: " "}} component={AvailabilityScreen}/>
    </Stack.Navigator>
  
  render() {

    const { loggedIn, loaded } = this.state

    if(!loaded){
      return(
        <Loading/>
      );
    }

    if(!loggedIn){
      return (
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen name={"Login"} 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" options={{headerTransparent: true, headerTitle: " "}} component={HomeScreen} />
            <Stack.Screen name="Room" component={RoomScreen} options={({ route }) => ({ title: route.params.thread.name })} />
            <Stack.Screen name="Calendar"  component={Calendario}/>
            <Stack.Screen name = "StateTime" component={Time}/>
            <Stack.Screen name = "Search" component={Search}/>
            <Stack.Screen name = "Map" component={Map}/>
            <Stack.Screen name = "Confirm" component={Confirm}/>
            <Stack.Screen name = "Cita" component={Cita}/>
          </Stack.Navigator>
        </NavigationContainer>
      </Provider>


    );
  }
}