import React, { Component } from 'react';
import { Platform, StyleSheet, View, TouchableOpacity } from 'react-native';
import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import Icon2 from 'react-native-vector-icons/dist/MaterialCommunityIcons';
import Text from 'react-native-text';
//function
import { width, height } from '../../config/screen';
import Size from '../../config/size'
const size = new Size;

export default class DrawerNavigationHeader extends Component {


    logoutIcon() {
        if (this.props.logout == true) {
          return(
            <Icon2 name="logout-variant" size={size.getSize(50)} color='black' 
            onPress = {()=> this.props.onPress && this.props.onPress()} />
          )
        }
    }

    render() {
        return (
            <View style={{
                width: width,
                height: '10%',
                alignItems: 'center',
                justifyContent: 'center',
                marginTop: 20,
                flexDirection: 'row',
            }}>

                <View style={{
                    width: '30%',
                    height: '100%',
                    justifyContent: 'center',
                    paddingLeft:5,
                }}>

                    <Icon name="md-menu" size={size.getSize(50)} color='black'
                        onPress={() => { this.props.navigation.navigate('DrawerOpen'); }} />
                </View>

                <View style={{
                    width: '40%',
                    height: '100%',
                    justifyContent: 'center',
                    alignItems: 'center'
                }}>
                    <Text style={{ fontSize: 22, }}>
                        {this.props.title}
                    </Text>

                </View>

                <View style={{
                    width: '30%',
                    paddingRight: 5,
                    height: '100%',
                    flexDirection: 'row',
                    justifyContent: 'flex-end',
                    alignItems: 'center'
                }}>

                    {this.logoutIcon()}

                </View>

            </View>
        );
    }
}