import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { createStackNavigator, createBottomTabNavigator, createMaterialTopNavigator, createSwitchNavigator } from 'react-navigation'

class Intro extends React.Component{
  render(){
    return (
      <View style={styles.container}>
        <Button
          onPress = {() => this.props.navigation.navigate('Rules')}
          title = '?'
        />
        <Text>Pitch Voice</Text>
        <Button
          onPress = {() => this.props.navigation.navigate('PreGame')}
          title = 'Novo Jogo'
        />

      </View>
    );
  }
}

class Rules extends React.Component{
  render(){
    return (
      <View style={styles.container}>
        <Text>Regras do Jogo</Text>
      </View>
    );
  }
}

class PreGame extends React.Component{
  render(){
    return (
      <View style={styles.container}>
        <Text>Pré partida</Text>
        <Button
        onPress = {() => this.props.navigation.navigate('Game')}
        title = 'Jogar'
        />
      </View>
    );
  }
}

class Game extends React.Component{
  render(){
    return (
      <View style={styles.container}>
        <Text>Partida</Text>
        <Button
        onPress = {() => this.props.navigation.navigate('Ranking')}
        title = 'Pontuação'
        />
      </View>
    );
  }
}

class Ranking extends React.Component{
  render(){
    return (
      <View style={styles.container}>
        <Text> Search Screen Top</Text>
      </View>
    );
  }b
}

const IntroStack = createStackNavigator({
  Intro: Intro,
  Rules: Rules,
  PreGame: PreGame
})

const RankTab = createBottomTabNavigator({
  PreGame: PreGame,
  Game: Game
})

export default Navig = createSwitchNavigator({
  Intro: IntroStack,
  Game: Game,
  Ranking: RankTab
})

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});