import React from 'react'
import { Link } from 'react-router'
import { store } from '../store'
import { isUserLoggedIn } from '../actions/actionCreators'

import { Nav, Navbar, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'

export default class NavBar extends React.Component {
  render() {
    const username = this.props.userStore.username;
    const isLoggedIn = username !== "" ? true : false;
    return (
      <div>
        <Navbar inverse fixedTop collapseOnSelect>
          <Navbar.Header>
            <LinkContainer to="/">
              <Navbar.Brand><a href="#">Canapé</a></Navbar.Brand>
            </LinkContainer>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav>
              <LinkContainer to="/movies/popular">
                <NavItem>Popular movies</NavItem>
              </LinkContainer>
              <LinkContainer to="/movies/polochon">
                <NavItem>Polochon movies</NavItem>
              </LinkContainer>
            </Nav>
            <Nav pullRight>
              {isLoggedIn ||
                <LinkContainer to="/users/signup">
                  <NavItem>Sign up</NavItem>
                </LinkContainer>
              }
              {isLoggedIn ||
                <LinkContainer to="/users/login">
                  <NavItem>Login</NavItem>
                </LinkContainer>
              }
              {isLoggedIn &&
                  <NavDropdown title={username} id="navbar-dropdown-right">
                    <LinkContainer to="/users/edit">
                      <MenuItem>Edit</MenuItem>
                    </LinkContainer>
                    <LinkContainer to="/users/logout" onClick={this.props.userLogout}>
                      <MenuItem>Logout</MenuItem>
                    </LinkContainer>
                  </NavDropdown>
              }
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>

    );
  }
}