import _ from 'lodash'
import React, {Component, Fragment} from 'react'

import {
  Nav,
  Navbar,
  NavbarBrand,
  NavbarToggler,
  Collapse,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from 'reactstrap'

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'

import {fetchTeams} from '../modules/teams'
import {fetchProfile} from '../modules/user'

import logo from '../botpress.svg'

class Home extends Component {
  state = {isMenuOpen: true}
  toggleMenu = () => {
    this.setState({isMenuOpen: !this.state.isMenuOpen})
  }

  componentDidMount() {
    if (!this.props.profile) {
      this.props.fetchProfile()
    }

    if (!this.props.teams) {
      this.props.fetchTeams()
    }
  }

  renderProfileMenu() {
    if (!this.props.profile) {
      return null
    }

    return (
      <UncontrolledDropdown nav inNavbar>
        <DropdownToggle nav caret>
          <span className="user-profile">
            <img alt="" src={this.props.profile.picture} className="user-avatar"/>
            <span>{this.props.profile.username}</span>
          </span>
        </DropdownToggle>
        <DropdownMenu right>
          <DropdownItem onClick={() => this.props.history.push('/me')}>My profile</DropdownItem>
          <DropdownItem onClick={() => this.props.history.push('/licence')}>Licence</DropdownItem>
          <DropdownItem disabled>Preferences</DropdownItem>
          <DropdownItem divider/>
          <DropdownItem onClick={() => this.props.auth.logout()}>Logout</DropdownItem>
        </DropdownMenu>
      </UncontrolledDropdown>
    )
  }

  renderSwitchTeam() {
    if (!this.props.currentTeam) {
      return null
    }

    return (
      <UncontrolledDropdown nav inNavbar>
        <DropdownToggle nav caret>
          Teams
        </DropdownToggle>
        <DropdownMenu right>
          {this.props.teams &&
          _.take(this.props.teams, 5).map(team => {
            return (
              <DropdownItem key={team.id} onClick={() => this.props.history.push(`/teams/${team.id}`)}>
                {team.name}
              </DropdownItem>
            )
          })}
          <DropdownItem divider/>
          <DropdownItem onClick={() => this.props.history.push('/teams')}>See all</DropdownItem>
        </DropdownMenu>
      </UncontrolledDropdown>
    )
  }

  render() {
    return (
      <Fragment>
        <header className="bp-header">
          <Navbar expand="md">
            <NavbarBrand href="/admin">
              <img src={logo} alt="logo" className="bp-header__logo"/>
              &nbsp;|&nbsp;
              <span className="bp-header__title">Admin</span>
            </NavbarBrand>
            <NavbarToggler onClick={this.toggleMenu}/>
            <Collapse isOpen={this.state.isMenuOpen} navbar>
              <Nav className="ml-auto" navbar>
                {this.renderSwitchTeam()}
                {this.renderProfileMenu()}
              </Nav>
            </Collapse>
          </Navbar>
        </header>
        <div className="bp-main-content">{this.props.children}</div>
      </Fragment>
    )
  }
}

const mapStateToProps = state => ({
  teams: state.teams.items,
  currentTeamId: state.teams.teamId,
  currentTeam: state.teams.team,
  profile: state.user.profile
})

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      fetchProfile,
      fetchTeams
    },
    dispatch
  )

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Home)

@@ -31,16 +31,17 @@
 React, %7B
+ 
 Componen
@@ -51,16 +51,17 @@
 Fragment
+ 
 %7D from '
@@ -240,23 +240,25 @@
 import %7B
+ 
 connect
+ 
 %7D from '
@@ -278,16 +278,17 @@
 import %7B
+ 
 bindActi
@@ -297,16 +297,17 @@
 Creators
+ 
 %7D from '
@@ -318,24 +318,25 @@
 x'%0A%0Aimport %7B
+ 
 fetchTeams%7D 
@@ -333,16 +333,17 @@
 tchTeams
+ 
 %7D from '
@@ -368,16 +368,17 @@
 import %7B
+ 
 fetchPro
@@ -381,16 +381,17 @@
 hProfile
+ 
 %7D from '
@@ -486,16 +486,17 @@
 tate = %7B
+ 
 isMenuOp
@@ -503,16 +503,17 @@
 en: true
+ 
 %7D%0A  togg
@@ -548,16 +548,17 @@
 tState(%7B
+ 
 isMenuOp
@@ -583,16 +583,17 @@
 MenuOpen
+ 
 %7D)%0A  %7D%0A%0A
@@ -1048,16 +1048,17 @@
 -avatar%22
+ 
 /%3E%0A     
@@ -1459,32 +1459,33 @@
 downItem divider
+ 
 /%3E%0A          %3CDr
@@ -1908,16 +1908,18 @@
         
+  
 _.take(t
@@ -1960,24 +1960,26 @@
             
+  
 return (%0A   
@@ -1971,24 +1971,26 @@
    return (%0A
+  
             
@@ -2081,16 +2081,18 @@
 id%7D%60)%7D%3E%0A
+  
         
@@ -2117,32 +2117,34 @@
 %7D%0A              
+  
 %3C/DropdownItem%3E%0A
@@ -2155,18 +2155,22 @@
         
-)%0A
+  )%0A  
         
@@ -2206,16 +2206,17 @@
  divider
+ 
 /%3E%0A     
@@ -2593,16 +2593,17 @@
 r__logo%22
+ 
 /%3E%0A     
@@ -2766,16 +2766,17 @@
 gleMenu%7D
+ 
 /%3E%0A     

fix format