import React, { Component } from 'react'
import {
  Link
} from 'react-router-dom'
import { connect } from 'react-redux'
import { Menu } from 'semantic-ui-react'
import { css } from 'glamor'

class Nav extends Component {
  state = {}
  handleLogout = () => this.props.logout()
  handleClick = (e, { name }) => this.setState({ activeItem: name })
  
  render() {
    const { activeItem } = this.state
    return (
      <Menu secondary {...rules}>
        <Menu.Item
          name='home'
          as={Link}
          to="/"
          onClick={this.handleClick}>
        Home  
        </Menu.Item>
        
        {
          this.props.isAuthenticated ? 
        
            <Menu.Menu position="right">
              <Menu.Item
                name='households'
                as={Link}
                to="/households"
                active={activeItem === 'households'}
                onClick={this.handleClick}>
                Households
              </Menu.Item>
              
              <Menu.Item
                as={Link}
                to="/households/new">
                New Household
              </Menu.Item>

              <Menu.Item
                as={Link}
                to="/"
                onClick={this.handleLogout}>
                Logout
              </Menu.Item>

            </Menu.Menu>

            :

            <Menu.Menu position="right">
              <Menu.Item
                as={Link}
                to="/login">
                Login
              </Menu.Item>

              <Menu.Item
                as={Link}
                to="/signup">
                Sign Up
              </Menu.Item>
            </Menu.Menu>

          }
      </Menu>
    )
  }
}

export default connect(state => {
  return {
    isAuthenticated: state.auth.isAuthenticated
  }
}, null)(Nav)

let rules = css({
  height: '60px'
})

@@ -219,21 +219,8 @@
 t %7B%0A
-  state = %7B%7D%0A
   ha
@@ -264,128 +264,21 @@
 )%0A  
-handleClick = (e, %7B name %7D) =%3E this.setState(%7B activeItem: name %7D)%0A  %0A  render() %7B%0A    const %7B activeItem %7D = this.state
+%0A  render() %7B
 %0A   
@@ -411,36 +411,8 @@
     
-  onClick=%7Bthis.handleClick%7D
 %3E%0A  
@@ -690,89 +690,8 @@
     
-  active=%7BactiveItem === 'households'%7D%0A                onClick=%7Bthis.handleClick%7D
 %3E%0A  
@@ -844,16 +844,31 @@
 lds/new%22
+%0A              
 %3E%0A      

Remove active state to nav bar