import React from 'react';
import { connect } from 'react-redux';
import { NavigationActions } from 'react-navigation';
import { View, StyleSheet, Text, Button } from 'react-native';


export default (msg, target) => connect()(({ dispatch }) => {
  class Template extends React.PureComponent {
    render() {
      const action = () => {
        this.props.dispatch(NavigationActions.navigate({
          routeName: target,
        }));
      };
      return (
        <View style={styles.container}>
          <Text> { this.props.msg } </Text>
          <Button onPress={action} title="Click me" />
        </View>
      );
    }
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#ffffff',
    },
    img: {
      flex: 1,
      width: 400,
      height: 200,
      resizeMode: 'contain',
    },
  });
  return <Template msg={msg} dispatch={dispatch} />;
});
