import React from 'react';
import { StyleSheet, View, Button, TextInput } from 'react-native';
import { setActualMessage, addMessage } from '../../../actions/mensajes';
import { connect } from 'react-redux'

class NuevoMensajeComponent extends React.Component {
   constructor(props) {
       super(props);
       this.color = 'red';
     }

   render(){
       const { setActualMessage, addMessage, mensajeActual } = this.props;
       return (
           <View style={styles.container}>
               <View style={styles.messageBox}>
                   <TextInput
                       style={{ borderColor: 'gray', borderWidth: 1}}
                       onChangeText={(text) => setActualMessage(text)}
                       value={mensajeActual}
                   />
               </View>

               <View style={styles.button}>
                   <Button
                       onPress={ () => addMessage( {texto:mensajeActual, color:this.color}) }
                       title="Send"
                   />
               </View>
           </View>
       );
   };
};

const mapDispatchToProps = (dispatch) => {
   return {
       setActualMessage: texto => dispatch(setActualMessage(texto)),
       addMessage: message => dispatch(addMessage(message))
   };
};

const mapStateToProps = state => ({
   mensajeActual: state.mensajeActual.texto
});

const styles = StyleSheet.create({
   container:{
       flex:1,
       flexDirection:'row',
       justifyContent:'flex-start',
       alignItems:'stretch',
   },
   messageBox:{
       flex:1,
       margin:5
   },
   button:{
       marginRight:5
   }
});

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