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

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

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

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

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}>Profile</Text>
      </TouchableOpacity>
    );
  }

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

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

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

HeaderTitle.defaultProps = {
  hasActiveEvent: false,
};
