// @flow
import * as React from 'react'
import {ClickableBox, Icon, Avatar, Box, Divider, Text, ProgressIndicator} from '../../common-adapters'
import {globalMargins, globalStyles, globalColors} from '../../styles'
import {isMobile} from '../../constants/platform'

import type {Teamname} from '../../constants/teams'

export type Props = {
  teamnames: Array<Teamname>,
  teammembercounts: {[string]: number},
  newTeams: Array<Teamname>,
  onOpenFolder: (teamname: Teamname) => void,
  onManageChat: (teamname: Teamname) => void,
  onViewTeam: (teamname: Teamname) => void,
}

type RowProps = {
  name: Teamname,
  membercount: number,
  isNew: boolean,
  onOpenFolder: () => void,
  onManageChat: () => void,
  onViewTeam: () => void,
}

export const newCharmStyle = {
  backgroundColor: globalColors.orange,
  borderRadius: 1,
  paddingLeft: 2,
  paddingRight: 2,
  marginRight: 4,
}

const Row = ({name, membercount, isNew, onOpenFolder, onManageChat, onViewTeam}: RowProps) => (
  <Box style={rowStyle}>
    <Box
      style={{
        ...globalStyles.flexBoxRow,
        alignItems: 'center',
        flex: 1,
        marginRight: globalMargins.tiny,
      }}
    >
      <ClickableBox style={{...globalStyles.flexBoxRow, alignItems: 'center', flex: 1}} onClick={onViewTeam}>
        <Avatar size={isMobile ? 48 : 32} teamname={name} isTeam={true} />
        <Box style={{...globalStyles.flexBoxColumn, flex: 1, marginLeft: globalMargins.small}}>
          <Text type="BodySemibold">
            {name}
          </Text>
          <Box style={globalStyles.flexBoxRow}>
            {isNew &&
              <Box style={newCharmStyle}>
                <Text style={{color: globalColors.white, fontSize: 10}} type="BodySmallSemibold">NEW</Text>
              </Box>}
            <Text type="BodySmall">
              {membercount + ' member' + (membercount !== 1 ? 's' : '')}
            </Text>
          </Box>
        </Box>
      </ClickableBox>
      {!isMobile && <Icon type="iconfont-folder-private" onClick={onOpenFolder} />}
      {!isMobile &&
        <Icon type="iconfont-chat" style={{marginLeft: globalMargins.small}} onClick={onManageChat} />}
    </Box>
    {!isMobile && <Divider style={{marginLeft: 48}} />}
  </Box>
)

const TeamList = (props: Props) => (
  <Box
    style={{
      ...globalStyles.flexBoxColumn,
      padding: globalMargins.tiny,
      width: '100%',
    }}
  >
    {!props.loaded && <ProgressIndicator style={{alignSelf: 'center', width: 20}} />}
    {props.teamnames.map((name, index, arr) => (
      <Row
        key={name}
        name={name}
        isNew={props.newTeams.includes(name)}
        membercount={props.teammembercounts[name]}
        onOpenFolder={() => props.onOpenFolder(name)}
        onManageChat={() => props.onManageChat(name)}
        onViewTeam={() => props.onViewTeam(name)}
      />
    ))}
  </Box>
)

const rowStyle = {
  ...globalStyles.flexBoxColumn,
  flexShrink: 0,
  minHeight: isMobile ? 64 : 48,
}

export default TeamList

@@ -106,16 +106,22 @@
 ndicator
+, Meta
 %7D from '
@@ -836,59 +836,45 @@
 ,%0A  
-paddingLeft: 2,%0A  padd
+marg
 in
-g
 Right: 
-2
+4
 ,%0A  
-marginRight: 4
+alignSelf: 'center'
 ,%0A%7D%0A
@@ -1586,27 +1586,26 @@
 w &&
-%0A              %3CBox
+ %3CMeta title=%22NEW%22
  sty
@@ -1626,137 +1626,10 @@
 yle%7D
-%3E%0A                %3CText style=%7B%7Bcolor: globalColors.white, fontSize: 10%7D%7D type=%22BodySmallSemibold%22%3ENEW%3C/Text%3E%0A              %3C/Box
+ /
 %3E%7D%0A 

Use meta component for NEW tag