import React, { Component } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { StackActions, NavigationActions } from 'react-navigation';
import { connect } from 'react-redux';
import { trocarCor } from '../actions/CoresActions';

export class Tela1 extends Component {

    constructor(props) {
        super(props);
        this.state = {};

    this.acaoBotao = this.acaoBotao.bind(this);
    }

  acaoBotao() {
    this.props.trocarCor('vermelho');

    this.props.navigation.navigate('Tela2');
  }

    render(){
        return (
            <View style={styles.container}>
                <Text>COR ATUAL: {this.props.cor}</Text>

        <Button onPress={this.acaoBotao} title="Trocar para Vermelho" />
            </View>
        );
    }
}

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

const mapStateToProps = (state) => {
    return {
        cor:state.cores.cor
    };
}

const Tela1Connect = connect(mapStateToProps, { trocarCor })(Tela1);
export default Tela1Connect;