import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { Header } from 'react-native-elements';

import HeaderTitle from './HeaderTitle/HeaderTitle.container.js';
import HeaderContentLeft from './HeaderContentLeft.container.js';
import HeaderContentRight from './HeaderContentRight.container.js';

export default class AppHeader extends Component {
    static get propTypes() {
        return {
            fetchEvents: PropTypes.func.isRequired,
        };
    }

    componentDidMount() {
        this.props.fetchEvents();
    }

    render() {
        const { navigation } = this.props;

        return (
            <Header
                placement="left"
                centerComponent={<HeaderTitle navigation={navigation} />}
                leftComponent={<HeaderContentLeft navigation={navigation} />}
                rightComponent={<HeaderContentRight navigation={navigation} />}
            />
        );
    }
}