/**
 * @flow
 */

import React from 'react';
import { TouchableOpacity, View } from 'react-native';
import { connect } from 'react-redux';
import Index from '../BasicIcon';
import { pop } from '../../BasicNavigator/actions';
import StyleSheet from '../../utils/StyleSheet';


const styles = StyleSheet.create({
  backButton: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 10,
  },
  buttonIOSAndroid: {
    width: 90,
    ios: {
      paddingTop: 0,
      height: 44,
    },
    android: {
      paddingTop: 0,
      height: 44,
    },
    justifyContent: 'center',
  },
})

type BackButtonType = {
  onBackPressed: ()=>void,
  routes: Array,
  imageUrl?: any,
  style?: Object,
}

function BackButton({ onBackPressed, imageUrl, style = {} }: BackButtonType) {
  return (
    <TouchableOpacity
      onPress={() => {
        onBackPressed()
      }}
      style={styles.backButton}
    >
      <View
        style={styles.buttonIOSAndroid}
      >
        <Index suite="Ionicons" name="ios-arrow-back" size={26} color={style.color || 'white'} />
      </View>
    </TouchableOpacity>
  );
}

const actionMapping = (dispatch, props) => ({
  onBackPressed: props.onBackPressed || (() => {
    if (props.routes && props.routes.length === 1) {

    } else {
      dispatch(pop());
    }
  }),
})
export default connect(null, actionMapping)(BackButton);
