import React from 'react';
import { StyleSheet, TouchableNativeFeedback, View, ViewStyle } from 'react-native';
import { Icon } from 'react-native-elements';
import { NavigationActions, NavigationBackAction } from 'react-navigation';
import { connect, Dispatch } from 'react-redux';
import { RootState } from '../../models';

interface Props {
  onPress?: () => NavigationBackAction;
  style?: ViewStyle;
}

interface OwnProps {
  style?: ViewStyle;
}

const BackButtonComponent: React.SFC<Props & OwnProps> = ({ onPress, style }) => (
  <View style={styles.container}>
    <TouchableNativeFeedback onPress={onPress} style={[styles.container, style]}>
      <View style={styles.innerContainer}>
        <Icon
          name='arrow-back'
          color='#fff'
        />
      </View>
    </TouchableNativeFeedback>
  </View>
);

export const BackButton = connect(null, (dispatch: Dispatch<RootState>) => ({
  onPress: () => dispatch(NavigationActions.back()),
}))(BackButtonComponent);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: 55,
    height: 55,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 30,
    overflow: 'hidden',
  },
  innerContainer: {
    width: 55,
    height: 55,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 30,
    flex: 1,
  },
});
