import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import './header.css';
import { fetchUser } from '../actions';
import { connect } from 'react-redux';

class Header extends Component {
    constructor(props) {
        super(props);
    }

    state = {};

    renderHeader = () => {
        if (this.props.auth.user) {
            return (
                <div className="nav_menu">
                    <NavLink exact to="/" activeClassName="selected_link">
                        Home
                    </NavLink>
                    <NavLink exact to="/logout" activeClassName="selected_link">
                        Log out
                    </NavLink>
                    <NavLink exact to="/profile" activeClassName="selected_link">
                        {this.props.auth.user.username}
                    </NavLink>
                </div>
            );
        }

        return (
            <div className="nav_menu">
                <NavLink exact to="/" activeClassName="selected_link">
                    Home
                </NavLink>
                <NavLink exact to="/register" activeClassName="selected_link">
                    Register
                </NavLink>
                <NavLink exact to="/login" activeClassName="selected_link">
                    Log in
                </NavLink>
            </div>
        );
    };

    render() {
        console.log('Header props', this.props);
        return this.renderHeader();
    }
}

const mapStateToProps = (state, ownProps) => {
    return {
        auth: state.auth
    };
};

export default connect(mapStateToProps)(Header);