import React, { FunctionComponent } from 'react';
import { View, StyleSheet } from 'react-native';
import { useTheme } from 'react-native-paper';
import Icon from 'react-native-vector-icons/Ionicons';
import { BackArrow } from './BackArrow';

export interface IHeaderProps {
    centerComponent?: () => React.ReactNode;
    leftComponent?: () => React.ReactNode;
    rightComponent?: () => React.ReactNode;
    containerStyle?: any;
    leftContainerStyle?: any;
    centerContainerStyle?: any;
    rightContainerStyle?: any;
}

export const Header: FunctionComponent<IHeaderProps> = (props: IHeaderProps) => {
    const { colors } = useTheme();

    const renderLeftSide = () => {
        const backArrowIcon = <Icon name="arrow-back" size={30} color={colors.primary} />;
        return props.leftComponent ? props.leftComponent() : <BackArrow icon={backArrowIcon} />;
    };

    const renderCenterSide = () => {
        return props.centerComponent ? props.centerComponent() : null;
    };

    const renderRightSide = () => {
        return props.rightComponent ? props.rightComponent() : null;
    };

    return (
        <View style={[styles.container, props.containerStyle]}>
            <View style={[styles.leftContainer, props.leftContainerStyle]}>
                {renderLeftSide()}
            </View>
            <View style={[styles.centerContainer, props.centerContainerStyle]}>
                {renderCenterSide()}
            </View>
            <View style={[styles.rightContainer, props.rightContainerStyle]}>
                {renderRightSide()}
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: '100%',
    },
    leftContainer: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    centerContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    rightContainer: {
        flexDirection: 'row',
        alignItems: 'center',
    },
});