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';

import styles from './AppHeader.styles.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"
        leftComponent={<HeaderContentRight navigation={navigation} />}
        centerComponent={<HeaderTitle navigation={navigation} />}
        rightComponent={<HeaderContentLeft navigation={navigation} />}
      />
    );
  }
}