import React from 'react'
import { Segment, Menu, Input } from 'semantic-ui-react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as Actions from './../../actions'
import { withRouter } from 'react-router-dom'

import Annotator from '../../components/Annotator'

import './dashboard.css'

class Dashboard extends React.Component {
  constructor () {
    super()
    this.state = {
      activeItem: 'elections'
    }
  }

  handleItemClick = (e, { name }) => this.setState({ activeItem: name })

  render () {
    const { activeItem } = this.state
    return (
      <div>
        <Menu attached='top' tabular className='dashboard-menu'>
          <Menu.Item name='elections' active={activeItem === 'elections'} onClick={this.handleItemClick} />
          <Menu.Item name='candidates' active={activeItem === 'candidates'} onClick={this.handleItemClick} />
          <Menu.Item name='media' active={activeItem === 'media'} onClick={this.handleItemClick} />
          <Menu.Item name='articles' active={activeItem === 'articles'} onClick={this.handleItemClick} />
          <Menu.Item name='users' active={activeItem === 'users'} onClick={this.handleItemClick} />
          <Menu.Item name='articles-labeling' active={activeItem === 'articles-labeling'} onClick={this.handleItemClick} />
          <Menu.Menu position='right'>
            <Menu.Item>
              <Input transparent icon={{ name: 'search', link: true }} placeholder='Search...' />
            </Menu.Item>
          </Menu.Menu>
        </Menu>
        <Segment attached='bottom'>
          <Annotator />
        </Segment>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isAuthenticated
})

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(Actions, dispatch)
})

const DashboardContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(Dashboard)

export default withRouter(DashboardContainer)

@@ -436,25 +436,33 @@
 eItem: '
-elections
+articles-labeling
 '%0A    %7D%0A
@@ -682,16 +682,140 @@
 -menu'%3E%0A
+          %3CMenu.Item name='articles-labeling' active=%7BactiveItem === 'articles-labeling'%7D onClick=%7Bthis.handleItemClick%7D /%3E%0A
         
@@ -1357,33 +1357,129 @@
 m name='
-articles-labeling
+groups' active=%7BactiveItem === 'groups'%7D onClick=%7Bthis.handleItemClick%7D /%3E%0A          %3CMenu.Item name='permissions
 ' active
@@ -1496,33 +1496,27 @@
 em === '
-articles-labeling
+permissions
 '%7D onCli

Add some menus