import React from 'react';

export default class Navigation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visitor: {uid: 0}
    }
    this.transition = this.transition.bind(this);
  }  
  transition(event) {
    event.preventDefault();
    this.props.onNavigate({ pathname: event.currentTarget.pathname, search: event.currentTarget.search});
  };
  render() {
    return (
     	<header>
        <div id="header_wrapper">
        <div id="logo"><a href="/" onClick={this.transition}>Juick</a></div>
        <nav id="global">
            <ul>
                { this.state.visitor.uid ? 
                <li><a href="/?show=discuss" onClick={this.transition}><i data-icon="ei-comment" data-size="s"></i>Discuss</a></li>
		 : 
                <li><a href="/?show=photos" rel="nofollow" onClick={this.transition}><i data-icon="ei-camera" data-size="s"></i>Photos</a></li>
                 }
                <li><a href="/?show=all" rel="nofollow" onClick={this.transition}><i data-icon="ei-search" data-size="s"></i>Discover</a></li>
                <li><a id="post" href="/post" onClick={this.transition}><i data-icon="ei-pencil" data-size="s"></i>Post</a>
                </li>
            </ul>
        </nav>
        <div id="search">
            <form action="/">
                <input name="search" className="text"
                       placeholder="Search..." />
            </form>
        </div>
        </div>
        </header>
    )
  }
}