 import React, {Component} from "react";
import {Image, Text, View, ActionSheetIOS, Picker, Platform, TouchableOpacity, Button, Dimensions} from "react-native";
import styles from "./style";
import { connect } from 'react-redux';
import { increment, increment_other } from '../../actions';
import { AsyncStorage } from "react-native";
import {NavigationEvents} from 'react-navigation';


// Timeout navigation: https://stackoverflow.com/questions/44937498/react-native-change-screen-after-x-seconds

class Start extends Component {
  static navigationOptions = {
    headerShown: false,
    /*headerStyle: {
      backgroundColor: '#90CCF4',
      borderBottomWidth: 1,
    },*/
  };

  constructor(props) {
    super(props);
  }

  componentWillMount(){
    AsyncStorage.clear();
  }

  screenAppears(){
    const navigation = this.props.navigation;
    setTimeout(function(){ navigation.navigate('GlobeIntro'); }, 3000);
  }
  render() {
    const navigation = this.props.navigation;
    const increment = this.props.increment;
    const increment_other = this.props.increment_other;
    const i = this.props.i;
    const other = this.props.other;
    return (
      <View style={styles.container}>
        <Image source={require('../logo.png')} style={{
          width: null,
          resizeMode: 'center',
          height: 100,
        }}/>
        <NavigationEvents onDidFocus={() => this.screenAppears()} />
      </View>
    );
  }
}



const mapStateToProps = (state) => {
    return {
      i: state.i,
      other: state.other,
    };
};
const mapDispatchToProps = (dispatch) => {
    return {
      increment: () => dispatch(increment()),
      increment_other: () => dispatch(increment_other()),
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Start);
