import React from 'react';
import PropTypes from 'prop-types';

import { Text, TouchableOpacity } from 'react-native';

import EventTitle from './EventTitle/EventTitle.container.js';

import styles from './HeaderTitle.styles.js';

const STRINGS = {
    PROFILE: 'Profile',
};

export default function HeaderTitle({
    activeRoute,
    hasActiveEvent,
    hasMultipleEvents,
    navigation,
}) {
    const _goBack = () => {
        if (hasActiveEvent) {
            navigation.goBack();
            return false;
        }

        console.log('nowhere to go...');
    };

    const _showEvents = () => {
        navigation.navigate('Events');
        return false;
    };

    if (activeRoute === 'Events') {
        return (
            <TouchableOpacity onPress={_goBack}>
                <Text style={styles.screenHeader}>{STRINGS.PROFILE}</Text>
            </TouchableOpacity>
        );
    }

    if (activeRoute === 'Profile') {
        return <Text style={styles.screenHeader}>{STRINGS.PROFILE}</Text>;
    }

    return <EventTitle action={hasMultipleEvents ? _showEvents : null} />;
}

HeaderTitle.propTypes = {
    activeRoute: PropTypes.string.isRequired,
    hasActiveEvent: PropTypes.bool,
    hasMultipleEvents: PropTypes.bool.isRequired,
};

HeaderTitle.defaultProps = {
    hasActiveEvent: false,
};