'use babel'

import React, { PropTypes, Component } from 'react'
import { connect } from 'react-redux'
import { setCurrentTeam } from '../lib/actions'
import classNames from 'classnames'
import Loader from './Loader'

// Style
import styled from 'styled-components'
import colors from './colors'
const TeamElement = styled.div`
  margin: 8px 5px;

  &.active::before {
    content: '';
    width: 10px;
    margin-left: -17px;
    margin-top: 4px;
    height: 26px;
    background-color: ${colors.textHighlight};
    border-radius: 3px;
    float: left;
  }

  img {
    display: block;
    border-radius: 3px;
    width: 32px;
    height: 32px;

    &:hover {
      border: 2px solid ${colors.textHighlight};
      box-sizing: border-box;
    }
  }
`

const TeamLogoElement = styled.div`
`

class TeamLogo extends Component {
  render() {
    const { team } = this.props

    if (team.icon) {
      return <img src={team.icon} alt={team.name} />
    }

    return <Loader size={32} />
  }
}

class SwitchTeam extends Component {
  static
  get propTypes() {
    return {
      team: PropTypes.object,
      order: PropTypes.number,
      dispatch: PropTypes.function,
      currentTeam: PropTypes.object,
    }
  }

  selectThisTeam() {
    const { team, dispatch } = this.props
    dispatch(setCurrentTeam(team))

    // Focus input after team switch
    setTimeout(() => {
      let el
      if (el = window.document.querySelector('.im-editor')) {
        el.focus()
      }
    }, 0)
  }

  render() {
    const { team, dispatch, currentTeam, order } = this.props
    const active = (team.id == currentTeam.id)

    return (
      <TeamElement key={team.id} onClick={ (e) => ::this.selectThisTeam() } className={classNames({ active })}>
        <TeamLogo team={team}/>
        ⌘{order + 1}
      </TeamElement>
    )
  }
}

function mapStateToProps(state) {
  return {
    currentTeam: state.currentTeam
  }
}

export default connect(mapStateToProps)(SwitchTeam)

@@ -552,16 +552,242 @@
 t;%0A  %7D%0A%0A
+  &.unread:not(.active)::before %7B%0A    content: '';%0A    width: 10px;%0A    background-color: $%7Bcolors.textHighlight%7D;%0A    margin-left: -17px;%0A    margin-top: 12px;%0A    height: 10px;%0A    border-radius: 10px;%0A    float: left;%0A  %7D%0A%0A
   img %7B%0A
@@ -1261,14 +1261,8 @@
 atic
-%0A  get
  pro
@@ -1271,32 +1271,48 @@
 ypes
-()
+ =
  %7B%0A    
-return %7B%0A 
+channels: PropTypes.array,%0A
     
- 
 team
@@ -1331,18 +1331,16 @@
 object,%0A
-  
     orde
@@ -1364,18 +1364,16 @@
 er,%0A    
- 
- 
 dispatch
@@ -1394,18 +1394,16 @@
 nction,%0A
-  
     curr
@@ -1429,22 +1429,16 @@
 object,%0A
-    %7D%0A
   %7D%0A%0A  s
@@ -1712,20 +1712,27 @@
 %0A  %7D%0A%0A  
-rend
+unreadCount
 er() %7B%0A 
@@ -1742,30 +1742,220 @@
 const %7B 
-team, dispatch
+channels, team %7D = this.props%0A%0A    return (Object.keys(channels%5Bteam.id%5D %7C%7C %7B%7D)).reduce((memo, key) =%3E %7B%0A      return memo + channels%5Bteam.id%5D%5Bkey%5D.unreadCount%0A    %7D, 0)%0A  %7D%0A%0A  render() %7B%0A    const %7B team
 , curren
@@ -2012,16 +2012,17 @@
 am.id ==
+=
  current
@@ -2029,16 +2029,60 @@
 Team.id)
+%0A    const unread = this.unreadCounter() %3E 0
 %0A%0A    re
@@ -2106,16 +2106,24 @@
 mElement
+%0A       
  key=%7Bte
@@ -2128,16 +2128,24 @@
 team.id%7D
+%0A       
  onClick
@@ -2146,19 +2146,17 @@
 nClick=%7B
- (e
+(
 ) =%3E ::t
@@ -2175,18 +2175,25 @@
 isTeam()
- 
 %7D
+%0A       
  classNa
@@ -2208,16 +2208,24 @@
 sNames(%7B
+ unread,
  active 
@@ -2227,16 +2227,23 @@
 tive %7D)%7D
+%0A      
 %3E%0A      
@@ -2265,16 +2265,17 @@
 m=%7Bteam%7D
+ 
 /%3E%0A     
@@ -2369,16 +2369,46 @@
 eturn %7B%0A
+    channels: state.channels,%0A
     curr
@@ -2433,16 +2433,17 @@
 rentTeam
+,
 %0A  %7D%0A%7D%0A%0A

mark team has unread