import { StackNavigator, TabNavigator } from 'react-navigation'
import React from 'react'
import { FontAwesome, Octicons, Foundation, Entypo} from '@expo/vector-icons';

import HomeScreen from '../screens/HomeScreen';
import CareCircleScreen from '../screens/CareCircleScreen';
import RootNavigation from './RootNavigation';
import MoodScreen from '../screens/MoodScreen';
import LoginScreen from '../screens/LoginScreen';
import SettingsScreen from '../screens/SettingsScreen';
import NotificationScreen from '../screens/NotificationScreen'
import RegisterScreen from '../screens/RegisterScreen'
import ForgotPasswordScreen from '../screens/ForgotPasswordScreen'
import TermsAndConditions from '../screens/TermsAndConditions'
import BoardingScreen from '../screens/BoardingScreen'

export const Stack1 = StackNavigator({
    Login: {
        screen: LoginScreen,
    },
    Register: {
        screen: RegisterScreen,
    },
    ForgotPassword: {
        screen: ForgotPasswordScreen,
    },
});

import Expo from 'expo';
import React from 'react';
import { Platform, StatusBar, StyleSheet, View, Linking, TouchableHighlight, Text, AsyncStorage } from 'react-native';
import { NavigationProvider, createRouter } from '@expo/ex-navigation';
import { FontAwesome } from '@expo/vector-icons';
import { ActionButton } from './components/ActionButton.js'
import Colors from './constants/Colors.js'
import { Stack1 } from './navigation/routes'

import cacheAssetsAsync from './utilities/cacheAssetsAsync';
import { AlertProvider } from './components/Alert'

const Router = createRouter(() => {})

class AppContainer extends React.Component {
  state = {
    appIsReady: false,
    user: null,
  };

  componentWillMount() {
    AsyncStorage.getItem('user_data').then((user_data_json) => {
      let user_data = JSON.parse(user_data_json);
      this.setState({
        user: user_data
      });
    });
    AsyncStorage.getItem('boarding').then((boarding) => {
      this.setState({
        boarding: boarding
      });
    });
    this._loadAssetsAsync();
  }

  async _loadAssetsAsync() {
    try {
      await cacheAssetsAsync({
      this.setState({ appIsReady: true });
    }
  }

  render() {
    if (this.state.appIsReady) {
      return (
        <AlertProvider>
          <View style={styles.container}>
            <NavigationProvider router={Router}>
              <Stack1/>
            </NavigationProvider>
            {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
            {Platform.OS === 'android' &&
              <View style={styles.statusBarUnderlay} />}
          </View>
        </AlertProvider>
        );
    } else {
      return <Expo.AppLoading />;
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  statusBarUnderlay: {
    height: 24,
    backgroundColor: 'rgba(0,0,0,0.2)',
  },
    actionButtonIcon: {
    fontSize: 20,
    height: 22,
    color: 'white',
  },
});

class LoginScreen extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
                  email: null,
                  password: null,
                  user: this.props.user,
                  boarding: this.props.boarding
                }
  }

  static route = {
    navigationBar: {
      visible: false,
    },
  }

  render(){
  if (this.state.boarding != null){
    if (this.props.user != null){
        return(
        <RootNavigation navigator= {this.props.navigator}/>
        )
    } else {
    return (
      <KeyboardAvoidingView style={styles.container} behavior='padding'>
              //...
        </KeyboardAvoidingView>
        )
      }
    } else {
      return(
      <BoardingScreen onDoneBtnClick={() => this._handleDoneButton()}/> )
    }
  }

}

export default connectAlert(LoginScreen)



Expo.registerRootComponent(AppContainer);