import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { login, logout, isLoggedIn } from '../utils/auth';
import '../stylesheets/app.scss';

class Nav extends Component {
	render() {
		return (
			<nav className="navbar navbar-default">
				<div className="navbar-header">
					<Link className="navbar-brand" to="/">
						🤖
					</Link>
				</div>
				<ul className="nav navbar-nav">
					<li>
						<Link to="/bots">Your Bots</Link>
					</li>
					<li>{isLoggedIn() ? <Link to="/bots/new">Make Bot</Link> : ''}</li>
				</ul>
				<ul className="nav navbar-nav navbar-right">
					<li>
						{isLoggedIn() ? (
							<button className="btn btn-danger log" onClick={() => logout()}>
								Log out{' '}
							</button>
						) : (
							<button className="btn btn-info log" onClick={() => login()}>
								Log In
							</button>
						)}
					</li>
				</ul>
			</nav>
		);
	}
}

export default Nav;
