import React from 'react';
import { StyleSheet, TouchableOpacity, View } from 'react-native';
import TextView from './TextView';

export default ToolbarUgly = ({
  title,
  scope,
  showBack=true,
  rightIcon,
  onBackPress
}) => (
  <View style={styles.toolbarUgly}>
    { showBack &&
      <TouchableOpacity
        style={styles.uglyIcon}
        onPress={() => {
          if (onBackPress) {
            onBackPress();
          } else {
            goBack();
          }
        }}>
        <MaterialIcons
          name={'arrow-back-ios'}
          size={20}
          color={textPrimary} />
      </TouchableOpacity>
    }
    <TextView style={styles.titleText}>{scope ? $t(scope) : title}</TextView>
    { rightIcon
    ? rightIcon()
    : showBack
    ? <View style={styles.uglyIcon}>
        <MaterialIcons
          name={'arrow-back-ios'}
          size={16}
          color={'transparent'} />
      </View>
    : <></>
    }
  </View>
)

const styles = StyleSheet.create({
  toolbarUgly: {
    paddingTop: statusHeight,
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: colorLight
  },
  uglyIcon: {
    height: 40,
    paddingLeft: 16,
    paddingRight: 8,
    alignItems: 'center',
    justifyContent: 'center'
  },
  titleText: {
    flex: 1,
    color: textPrimary,
    padding: 0,
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'left',
    //textTransform: 'uppercase'
  }
})