import React from 'react'
import { TouchableOpacity, StyleSheet, View, Text } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'

const Header = ({
  colorLeft,
  leftButton,
  leftIcon,
  title,
  colorRight,
  rightButton,
  rightIcon,
  screen,
  history,
  item
}) => {
  return (
    <View style={styles.container}>
      {leftButton === true &&
        <TouchableOpacity onPress={() => history.goBack()}>
          <Ionicons name={leftIcon} style={styles.leftButton} color={colorLeft} />
        </TouchableOpacity>
      }
      <Text style={styles.title}>{title}</Text>
      {rightButton === true &&
        <TouchableOpacity onPress={() => history.push(screen, (item))}>
          <Ionicons name={rightIcon} style={styles.rightButton} color={colorRight} />
        </TouchableOpacity>
      }
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 70,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    elevation: 2,
    backgroundColor: '#fff',
    flexDirection: 'row',
    position: 'relative'
  },
  title: {
    flex: 1,
    color: '#D70086',
    paddingTop: 23,
    fontFamily: 'AppleSDGothicNeo-Light',
    justifyContent: 'center',
    alignItems: 'center',
    fontWeight: '600',
    textAlign: 'center',
    fontSize: 18
  },
  leftAvatar: {
    height: 40,
    width: 40,
    marginTop: 20,
    marginLeft: 5
  },
  leftButton: {
    paddingTop: 25,
    paddingLeft: 10,
    fontSize: 35
  },
  rightButton: {
    paddingTop: 24,
    paddingRight: 13,
    fontSize: 35
  }
})

export { Header }