import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity, StatusBar,Image} from 'react-native';
import PropTypes from "prop-types";
import Icon from "./Icon";


const Header = (props) => {
    return (

        <View style={[{
            height: props.height, borderBottomColor: props.borderBottomColor, borderBottomWidth: 1,
            ...{
                shadowColor: "#000",
                shadowOffset: {
                    width: 0,
                    height: 2,
                },
                shadowOpacity: 0.25,
                shadowRadius: 3.84,

                elevation: 5,
            }
        }, props.containerStyle]}>
            {props.noStatusBar ? <StatusBar hidden/> : undefined}
            <View
                style={[styles.mainView, {backgroundColor: props.backgroundColor}, props.iconNameLeft === undefined ? styles.noLeft : undefined, props.mainStyle]}>
                {props.iconNameLeft === undefined ? undefined :
                    <TouchableOpacity onPress={() => props.onPressLeft()}>
                        {
                            props.imageLeft  != null ?
                                <Image
                                    resizeMode={props.imageLeftResizeMode}
                                    source={props.imageLeft}
                                    style={{height: props.imageLeftHeight, width: props.imageLeftWidth}}/>
                                :
                                <Icon style={[styles.icon, props.iconLeftStyle]} class={props.iconClassLeft} name={props.iconNameLeft}
                                      size={props.iconLeftSize}
                                      color={props.iconColorLeft == null ? props.iconColor : props.iconColorLeft}/>
                        }
                    </TouchableOpacity>
                }
                <View style={{flex: 1}}>
                    {props.customComponentTitle !== undefined ?
                        props.customComponentTitle
                        :
                        <Text style={[styles.title, props.styleTitle]}>{props.title}</Text>
                    }
                </View>

                <TouchableOpacity style={[styles.rightButton, props.rightButtonStyle]}
                                  onPress={(value) => props.onPressRight(value)}>
                    {
                        props.textButtonRight !== undefined ?
                            <Text style={[props.rightTextStyle, {
                                fontWeight: 'bold',
                                fontSize: 16,
                                padding: 10
                            }]}> {props.textButtonRight}</Text>
                            :
                            <Icon style={styles.icon} class={props.iconClassRight} name={props.iconNameRight}
                                  size={props.iconRightSize}
                                  color={props.iconColor == null ? props.iconColor : props.iconColorRight}/>
                    }

                </TouchableOpacity>

            </View>
        </View>


    )
};

const styles = StyleSheet.create({
    mainView: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start'

    },
    title: {
        color: 'white',
        fontSize: 20,
        fontWeight: 'bold',
        paddingLeft: 0,
        marginBottom: 3,
    },

    icon: {
        marginHorizontal: 16,
    },
    rightButton: {
        paddingVertical: 0

    }

});

Header.propTypes = {
    height: PropTypes.number,
    title: PropTypes.string.isRequired,
    backgroundColor: PropTypes.string,
    styleTitle: PropTypes.object,
    iconLeftSize: PropTypes.number,
    iconRightSize: PropTypes.number,
    iconColor: PropTypes.string,
    iconColorLeft: PropTypes.string,
    iconClassLeft: PropTypes.string,
    iconNameLeft: PropTypes.string,
    iconClassRight: PropTypes.string,
    iconNameRight: PropTypes.string,
    iconColorRight: PropTypes.string,
    rightButtonStyle: PropTypes.object,
    rightTextStyle: PropTypes.object,
    onPressLeft: PropTypes.func,
    onPressRight: PropTypes.func,
    noStatusBar: PropTypes.bool,
    customComponentTitle: PropTypes.object,
    borderBottomColor: PropTypes.string,
    textButtonRight: PropTypes.string,
    containerStyle: PropTypes.object,
    imageLeft: PropTypes.number,
    imageLeftWidth: PropTypes.number,
    imageLeftHeight: PropTypes.number,
    imageLeftResizeMode: PropTypes.string,
    iconLeftStyle: PropTypes.object
};

Header.defaultProps = {
    iconLeftSize: 24,
    iconRightSize: 24,
    backgroundColor: '#FFFFFF',
    height: 56,
    iconColor: 'white',
    borderBottomColor: 'transparent',
    textButtonRight: undefined,
    imageLeftResizeMode: 'center',
    imageLeftWidth: 50,
    imageLeftHeight: 50
};

export default Header;
